/* ─────────────────────────────────────────────────────────────────────────────
   Refonte de la landing (/new, /new2) — STRUCTURE.

   Grilles, espacements, echelle typographique, points de rupture, rythme des
   sections. Aucune couleur de marque ici : chaque couleur passe par une
   propriete personnalisee --lr-* avec un repli neutre (blancs et gris, lisibles
   sur fond sombre). Les feuilles de theme, chargees APRES celle-ci, definissent
   ces proprietes :
     · views.view.landing.new.css  → .lr--current (fond a vagues du site) ;
     · views.view.landing.new2.css → .lr--dark    (theme sombre Bumps).
   Les jetons peuvent etre poses sur .lr, sur un theme (.lr--dark) ou sur une
   section (.lr-final { --lr-text: … }) : ils sont lus la ou ils servent.

   Mobile d'abord. Ruptures : 600px, 900px, 1100px. Aucun defilement horizontal
   a 360px : gouttiere de 16px, grilles en minmax(0, …), valeurs en clamp().

   Tout est scope sous .lr, sauf .lr-skip (rendu avant la barre) et la barre
   repliee sur telephone (sous body:has(.lr)) : les autres pages, leur barre
   et leur pied n'en recoivent rien.
   ───────────────────────────────────────────────────────────────────────────── */

/* Echelles ----------------------------------------------------------------- */
.lr{
  --lr-s1:.25rem; --lr-s2:.5rem; --lr-s3:.75rem; --lr-s4:1rem;
  --lr-s5:1.5rem; --lr-s6:2rem;  --lr-s7:3rem;   --lr-s8:4rem;

  --lr-fs-h1:clamp(2.125rem, 1.35rem + 3.6vw, 3.875rem);
  --lr-fs-h2:clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  --lr-fs-h3:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --lr-fs-lead:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --lr-fs-small:.875rem;
  --lr-fs-xs:.75rem;
  --lr-fs-stat:clamp(3rem, 2rem + 5vw, 4.75rem);
  --lr-fs-stat-word:clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  --lr-fs-price:clamp(2.5rem, 1.8rem + 3vw, 3.5rem);

  --lr-gutter:1rem;                                   /* 16px de chaque cote */
  --lr-section-space:clamp(3rem, 1.5rem + 4vw, 5rem);
  --lr-head-gap:clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Racine ------------------------------------------------------------------- */
.lr{
  position:relative;
  isolation:isolate;
  overflow-x:clip;
  color:var(--lr-text, rgba(255,255,255,.92));
  background:var(--lr-bg, transparent);
  font-family:var(--lr-font-body, "Trebuchet MS", "Segoe UI", system-ui, sans-serif);
  font-size:1rem;
  line-height:1.6;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

/* Neutralise ce que Bootstrap (reboot) et app.css.php posent sur les elements
   nus : marges, retraits de liste, et surtout « h1, p, label { color:
   var(--color4) } » et le footer « legacy » d'app.css.php. Ici tout herite. */
.lr :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote){margin:0}
.lr :where(ul, ol){padding:0;list-style:none}
.lr :where(h1, h2, h3, h4, p, label){color:inherit}
.lr :where(img, svg){max-width:100%}
.lr :where(img){height:auto}
.lr :where(a){color:inherit}
.lr :where(s){text-decoration-thickness:1px}
.lr :where(input, button){font:inherit;color:inherit}

.lr :focus-visible{outline:3px solid var(--lr-focus, currentColor);outline-offset:3px}
.lr-main:focus{outline:none}

/* Utilitaires -------------------------------------------------------------- */
.lr-wrap{
  width:min(var(--lr-wrap, 1140px), 100% - 2 * var(--lr-gutter));
  margin-inline:auto;
}
.lr-sr{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.lr-icon{flex:none;display:inline-block;vertical-align:middle}

/* Lien d'evitement : rendu avant la barre, donc hors .lr. */
.lr-skip{
  position:absolute;left:1rem;top:-200px;z-index:1100;
  padding:.75rem 1rem;border-radius:8px;
  background:var(--lr-cta-bg, #fff);color:var(--lr-cta-text, #111);
  font-weight:700;text-decoration:none;
}
.lr-skip:focus{top:1rem}

/* Barre du haut (navigationLanding.php, rendue hors .lr) -------------------
   Telephone et tablette : la barre repliee garde « Essai gratuit » a cote du
   menu, sur les deux propositions (le bouton vit dans le bloc repliable de
   Bootstrap, il disparaissait avec lui). Menu ouvert, tout redevient normal.
   Seul comportement de la barre commun aux deux themes : l'habillage reste
   dans chaque feuille de theme. */
@media (max-width:991.98px){
  body:has(.lr) .nav-glass .navbar-toggler{order:2}
  body:has(.lr) .nav-glass .navbar-collapse{order:3}
  body:has(.lr) .nav-glass .navbar-collapse:not(.show){
    display:flex;order:1;flex-basis:auto;flex-grow:0;
    margin-inline:auto .625rem;
  }
  body:has(.lr) .nav-glass .navbar-collapse:not(.show) :is(.nav-anchors, .language-switcher, .btn-easyidp){display:none}
  body:has(.lr) .nav-glass .navbar-collapse:not(.show) .btn-nav-trial{margin-inline-start:0}
  body:has(.lr) .nav-glass .navbar-collapse.show .nav-auth{flex-wrap:wrap;gap:.5rem 0;padding-block:.25rem .75rem}
}
@media (max-width:359.98px){
  body:has(.lr) .btn-nav-trial{padding-inline:.75rem}
}

/* A valider / a fournir : visible, jamais cache ni devine. */
.lr-todo{
  outline:1px dashed var(--lr-todo, currentColor);outline-offset:2px;
  border-radius:4px;padding-inline:.25em;
}
/* Un paragraphe entier a fournir (temoignage, reponse de FAQ) : un seul cadre
   autour du bloc plutot qu'un pointille par fragment de ligne. */
.lr-quote--todo .lr-quote-text > p,
.lr-faq-item--todo .lr-faq-a > p{
  outline:1px dashed var(--lr-todo, currentColor);outline-offset:4px;border-radius:6px;
}
.lr-quote--todo .lr-quote-text .lr-todo,
.lr-faq-item--todo .lr-faq-a .lr-todo{outline:0;padding:0}
.lr-todo-tag{
  display:inline-block;margin-inline-start:.35em;padding:0 .5em;
  border:1px solid var(--lr-todo, currentColor);border-radius:999px;
  font-family:var(--lr-font-body, "Trebuchet MS", "Segoe UI", sans-serif);
  font-size:.6875rem;font-weight:700;line-height:1.6;font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:.1em;white-space:nowrap;
}

/* Rythme des sections ------------------------------------------------------ */
.lr-section{
  padding-block:var(--lr-section-space);
  scroll-margin-top:var(--lr-header-offset, 92px);
  color:var(--lr-text, inherit);
  background:var(--lr-section-bg, transparent);
}
.lr-head{margin-bottom:var(--lr-head-gap);max-width:46rem}
.lr-head--center{margin-inline:auto;text-align:center}
.lr-head--center .lr-h2,
.lr-head--center .lr-lead{margin-inline:auto}

/* Typographie -------------------------------------------------------------- */
.lr-h1,.lr-h2,.lr-h3,.lr-stat-v,.lr-price-v,.lr-btn,.lr-eyebrow{
  font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", "Segoe UI", sans-serif);
}
.lr-h1{
  font-size:var(--lr-fs-h1);font-weight:800;line-height:1.06;letter-spacing:-.02em;
  max-width:16ch;text-wrap:balance;color:var(--lr-heading, inherit);
}
.lr-h1-accent{color:var(--lr-h1-accent, var(--lr-accent-2, inherit))}
.lr-h2{
  font-size:var(--lr-fs-h2);font-weight:700;line-height:1.15;letter-spacing:-.01em;
  max-width:24ch;text-wrap:balance;color:var(--lr-heading, inherit);
}
/* Titre de la preuve sociale : un h2 pour le plan, lu comme un sur-titre. */
.lr-h2--label{
  font-size:var(--lr-fs-xs);font-weight:700;line-height:1.4;letter-spacing:.16em;
  text-transform:uppercase;max-width:none;color:var(--lr-eyebrow, var(--lr-accent, inherit));
}
.lr-h3{font-size:var(--lr-fs-h3);font-weight:600;line-height:1.3;color:var(--lr-heading, inherit)}
.lr-eyebrow{
  margin-bottom:var(--lr-s3);
  font-size:var(--lr-fs-xs);font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lr-eyebrow, var(--lr-accent, inherit));
}
.lr-lead{
  margin-top:var(--lr-s3);max-width:60ch;
  font-size:var(--lr-fs-lead);line-height:1.55;text-wrap:pretty;
  color:var(--lr-muted, rgba(255,255,255,.72));
}

/* Boutons et liens ----------------------------------------------------------
   Poids decroissant : .lr-btn--primary (un par section au plus), puis
   .lr-btn--secondary (contour), puis .lr-link (texte souligne). */
.lr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--lr-s2);
  max-width:100%;min-height:3rem;padding:.625rem 1.5rem;
  border:1.5px solid transparent;border-radius:var(--lr-radius-btn, 12px);
  font-size:1rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease;
}
.lr-btn--lg{min-height:3.375rem;padding-inline:1.75rem;font-size:1.0625rem}
.lr-btn--primary{
  background:var(--lr-cta-bg, #fff);color:var(--lr-cta-text, #111);
  box-shadow:var(--lr-cta-shadow, none);
}
.lr-btn--secondary{
  background:var(--lr-btn2-bg, transparent);color:var(--lr-btn2-text, inherit);
  border-color:var(--lr-btn2-border, var(--lr-border, rgba(255,255,255,.3)));
}
.lr-btn:hover{transform:translateY(-1px)}
.lr-btn--primary:hover{color:var(--lr-cta-text, #111);filter:brightness(1.05)}
.lr-btn--secondary:hover{color:var(--lr-btn2-text, inherit);border-color:var(--lr-btn2-border-hover, var(--lr-accent, currentColor))}

.lr-link{
  display:inline-flex;align-items:center;gap:.375rem;
  font-weight:600;color:var(--lr-link, var(--lr-accent, inherit));
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.lr-link:hover{color:var(--lr-link-hover, var(--lr-link, var(--lr-accent, inherit)));text-decoration-thickness:2px}
.lr-link .lr-icon,.lr-more .lr-icon{transition:transform .18s ease}
.lr-link:hover .lr-icon,.lr-more:hover .lr-icon{transform:translateX(3px)}

.lr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lr-s4) var(--lr-s5)}
.lr-actions--center{justify-content:center}

/* Cartes ------------------------------------------------------------------- */
.lr-card{
  color:var(--lr-text, inherit);
  background:var(--lr-surface, rgba(255,255,255,.05));
  border:1px solid var(--lr-border, rgba(255,255,255,.14));
  border-radius:var(--lr-radius, 18px);
  box-shadow:var(--lr-card-shadow, none);
}

/* 2. Hero ------------------------------------------------------------------ */
.lr-hero{padding-block:clamp(2rem, 1rem + 5vw, 5rem) var(--lr-section-space)}
.lr-hero-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:clamp(2.5rem, 1.5rem + 3vw, 4rem);align-items:center}
.lr-focus{display:flex;flex-wrap:wrap;gap:var(--lr-s2) var(--lr-s4);margin-bottom:var(--lr-s5)}
.lr-focus-item{
  display:inline-flex;align-items:center;gap:.4375rem;
  font-size:.9375rem;color:var(--lr-muted, rgba(255,255,255,.72));
}
.lr-focus-item .lr-icon{color:var(--lr-accent-2, currentColor)}
.lr-hero-sub{
  margin-top:var(--lr-s4);max-width:46ch;
  font-size:clamp(1.0625rem, 1rem + .45vw, 1.25rem);line-height:1.55;text-wrap:pretty;
  color:var(--lr-muted, rgba(255,255,255,.72));
}
.lr-hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--lr-s3);margin-top:var(--lr-s6)}
.lr-reassure{font-size:var(--lr-fs-small);color:var(--lr-faint, rgba(255,255,255,.55))}
.lr-hero-alt{font-size:.9375rem;color:var(--lr-muted, rgba(255,255,255,.72))}
.lr-hero-visual{position:relative;min-width:0}
.lr-visual-caption{
  margin-top:var(--lr-s3);font-size:var(--lr-fs-xs);letter-spacing:.02em;
  color:var(--lr-faint, rgba(255,255,255,.55));
}

/* Capture (/new) */
.lr-shot img{
  display:block;width:100%;height:auto;
  border:1px solid var(--lr-border, rgba(255,255,255,.14));
  border-radius:var(--lr-radius, 18px);
  box-shadow:var(--lr-shot-shadow, none);
}

/* Maquette HTML (/new2). Positions : --lr-from / --lr-to (ecart) et --lr-at
   (pastille), posees en ligne par hero.php. Joueur = --lr-mock-player, coach =
   --lr-mock-coach. */
.lr-mock{position:relative}
.lr-mock-card{
  padding:clamp(1rem, .75rem + 1vw, 1.375rem);
  background:var(--lr-mock-bg, var(--lr-surface-2, rgba(255,255,255,.07)));
  border:1px solid var(--lr-border, rgba(255,255,255,.14));
  border-radius:calc(var(--lr-radius, 18px) + 4px);
  box-shadow:var(--lr-mock-shadow, none);
}
.lr-mock-head{display:flex;align-items:center;gap:var(--lr-s3);margin-bottom:var(--lr-s4)}
.lr-mock-id{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.lr-mock-name{font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);font-weight:600}
.lr-mock-meta{font-size:.8125rem;color:var(--lr-muted, rgba(255,255,255,.72))}
.lr-mock-badge{
  margin-left:auto;padding:.3125rem .625rem;border-radius:999px;white-space:nowrap;
  font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);font-size:.75rem;font-weight:600;
  color:var(--lr-mock-badge-text, var(--lr-accent-2, inherit));
  background:var(--lr-mock-badge-bg, rgba(255,255,255,.08));
}
.lr-mock-goal{padding-block:var(--lr-s3);border-top:1px solid var(--lr-border-soft, rgba(255,255,255,.08))}
.lr-mock-goal-top{display:flex;justify-content:space-between;gap:var(--lr-s3);margin-bottom:.625rem;font-size:.875rem;line-height:1.35}
.lr-mock-goal-label{min-width:0}
.lr-mock-period{flex:none;font-size:.78rem;color:var(--lr-faint, rgba(255,255,255,.55))}
.lr-mock-track{position:relative;height:8px;border-radius:99px;background:var(--lr-track, rgba(255,255,255,.1))}
.lr-mock-gap{
  position:absolute;top:0;height:100%;border-radius:99px;
  left:var(--lr-from, 0%);width:calc(var(--lr-to, 0%) - var(--lr-from, 0%));
  background:var(--lr-mock-gap, currentColor);opacity:.35;
}
.lr-mock-dot{
  position:absolute;top:50%;left:var(--lr-at, 0%);
  width:16px;height:16px;border-radius:50%;transform:translate(-50%, -50%);
  border:3px solid var(--lr-mock-dot-ring, rgba(0,0,0,.6));
}
.lr-mock-dot--player{background:var(--lr-mock-player, var(--lr-accent, #fff))}
.lr-mock-dot--coach{background:var(--lr-mock-coach, var(--lr-accent-2, #999))}
.lr-mock-legend{display:flex;flex-wrap:wrap;gap:var(--lr-s2) var(--lr-s4);margin-top:var(--lr-s3);font-size:.8125rem;color:var(--lr-muted, rgba(255,255,255,.72))}
.lr-mock-key{display:inline-flex;align-items:center;gap:.375rem}
.lr-mock-key::before{content:"";width:9px;height:9px;border-radius:50%}
.lr-mock-key--player::before{background:var(--lr-mock-player, var(--lr-accent, #fff))}
.lr-mock-key--coach::before{background:var(--lr-mock-coach, var(--lr-accent-2, #999))}
.lr-mock-alert{
  display:flex;align-items:center;gap:.625rem;margin-top:var(--lr-s4);
  padding:.625rem .875rem;border-radius:14px;font-size:.875rem;line-height:1.4;
  background:var(--lr-mock-alert-bg, var(--lr-surface-2, rgba(0,0,0,.5)));
  border:1px solid var(--lr-danger, currentColor);
  box-shadow:var(--lr-mock-shadow, none);
  animation:lr-pop .5s ease 1.2s both;
}
.lr-mock-alert .lr-icon,.lr-mock-alert-who{color:var(--lr-danger, inherit)}
.lr-mock-alert-who{font-weight:600}
@keyframes lr-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Vague decorative sous le hero : masquee, un theme l'active (display:block). */
.lr-wave{display:none;width:100%;height:auto;margin-top:clamp(3rem, 2rem + 4vw, 6rem)}
.lr-wave-stop-1{stop-color:var(--lr-wave-1, currentColor)}
.lr-wave-stop-2{stop-color:var(--lr-wave-2, currentColor)}
.lr-wave-front{opacity:var(--lr-wave-opacity, .9)}
.lr-wave-back{fill:var(--lr-wave-back, transparent)}

/* 3. Preuve sociale -------------------------------------------------------- */
.lr-proof{padding-block:clamp(2.5rem, 1.5rem + 3vw, 4rem)}
.lr-proof-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--lr-s6);margin-top:var(--lr-s5)}
.lr-stats{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--lr-s5)}
.lr-stat{display:flex;flex-direction:column;gap:var(--lr-s1);min-width:0}
.lr-stat-v{
  font-size:var(--lr-fs-stat);font-weight:800;line-height:1;letter-spacing:-.02em;
  color:var(--lr-stat, var(--lr-accent-2, inherit));
}
.lr-stat--word .lr-stat-v{font-size:var(--lr-fs-stat-word);line-height:1.1;letter-spacing:-.01em}
.lr-stat-l{font-size:.9375rem;color:var(--lr-muted, rgba(255,255,255,.72))}
/* Bandeau des clubs : partner_logo_loop.php en .logo-loop-flat, dont
   app.css.php (charge sur toutes les pages) fait tout — defilement, fondu des
   bords par masque (juste sur n'importe quel fond, donc sur les deux themes),
   pause au survol. Ici, le filet qui le separe des chiffres ; son arret a
   l'impression est en fin de fichier. */
.lr-logos{min-width:0;padding-top:var(--lr-s5);border-top:1px solid var(--lr-border, rgba(255,255,255,.14))}
/* La piste met un --gap entre les deux copies : -50 % tombe alors un demi-gap
   avant la seconde, d'ou un saut a chaque tour. L'ecart passe dans chaque
   copie : une moitie = une liste + un gap, la boucle se raccorde net. */
.lr-logos .logo-track{gap:0}
.lr-logos .logo-list{padding-inline-end:var(--gap)}

/* 4. Probleme -------------------------------------------------------------- */
.lr-problem-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--lr-s6);align-items:start}
.lr-problem-grid .lr-head{margin-bottom:0}
.lr-pains{display:grid;gap:var(--lr-s4)}
.lr-pain{
  display:flex;align-items:flex-start;gap:var(--lr-s4);
  padding:var(--lr-s4) 1.125rem;border-radius:var(--lr-radius-sm, 12px);
  background:var(--lr-pain-bg, var(--lr-surface, rgba(255,255,255,.05)));
  border-inline-start:3px solid var(--lr-danger, currentColor);
}
.lr-pain-icon{
  flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:10px;
  color:var(--lr-danger, inherit);background:var(--lr-pain-icon-bg, rgba(255,255,255,.06));
}
.lr-pain-body{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.lr-pain-t{font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);font-weight:600;font-size:1.0625rem}
.lr-pain-d{color:var(--lr-muted, rgba(255,255,255,.72))}

/* 6. Benefices ------------------------------------------------------------- */
.lr-benefits-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--lr-s5)}
.lr-benefit{display:flex;flex-direction:column;padding:var(--lr-s6) var(--lr-s5) var(--lr-s5)}
.lr-benefit-icon{
  display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:var(--lr-s4);
  border-radius:14px;color:var(--lr-accent, inherit);
  background:var(--lr-icon-bg, var(--lr-surface-2, rgba(255,255,255,.08)));
}
.lr-benefit-t{margin-bottom:var(--lr-s3)}
.lr-bullets{display:grid;gap:var(--lr-s2)}
.lr-bullets li{display:flex;gap:.625rem;font-size:.9688rem;line-height:1.5;color:var(--lr-muted, rgba(255,255,255,.72))}
.lr-bullets li::before{
  content:"";flex:none;width:7px;height:7px;margin-top:.6em;border-radius:50%;
  background:var(--lr-bullet, var(--lr-accent-2, currentColor));
}
.lr-tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:var(--lr-s4)}
.lr-tag{
  padding:.1875rem .625rem;border-radius:999px;
  font-size:var(--lr-fs-xs);font-weight:600;letter-spacing:.02em;line-height:1.5;
  color:var(--lr-tag-text, var(--lr-muted, rgba(255,255,255,.72)));
  background:var(--lr-tag-bg, transparent);
  border:1px solid var(--lr-tag-border, var(--lr-border, rgba(255,255,255,.14)));
}
.lr-more{
  display:inline-flex;align-items:center;gap:.375rem;align-self:flex-start;
  margin-top:auto;padding-top:var(--lr-s5);
  font-weight:600;font-size:.9375rem;text-decoration:none;
  color:var(--lr-link, var(--lr-accent, inherit));
}
.lr-more:hover{color:var(--lr-link-hover, var(--lr-link, var(--lr-accent, inherit)));text-decoration:underline;text-underline-offset:3px}

/* 7. Temoignages ----------------------------------------------------------- */
.lr-quotes{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--lr-s5)}
.lr-quote{display:flex;flex-direction:column;gap:var(--lr-s5);padding:var(--lr-s6) var(--lr-s5)}
.lr-quote-text{font-size:1.0625rem;line-height:1.6;text-wrap:pretty}
.lr-quote--featured .lr-quote-text{
  font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);
  font-size:clamp(1.125rem, 1rem + .6vw, 1.3rem);font-weight:500;line-height:1.45;
}
.lr-quote--todo{border-style:dashed}
.lr-quote--todo .lr-quote-text{color:var(--lr-muted, rgba(255,255,255,.72))}
.lr-quote-who{display:flex;align-items:center;gap:var(--lr-s3);margin-top:auto}
.lr-avatar{
  flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;overflow:hidden;
  font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);font-weight:700;font-size:.875rem;
  color:var(--lr-avatar-text, inherit);
  background:var(--lr-avatar-bg, var(--lr-surface-2, rgba(255,255,255,.1)));
  border:2px solid var(--lr-avatar-ring, var(--lr-border, rgba(255,255,255,.2)));
}
.lr-avatar--logo img{width:70%;height:70%;object-fit:contain}
.lr-quote-id{display:flex;flex-direction:column;gap:.3125rem;min-width:0;line-height:1.35}
.lr-quote-name{font-weight:600;font-size:.9375rem}
.lr-quote-role{font-size:var(--lr-fs-small);color:var(--lr-muted, rgba(255,255,255,.72))}

/* 8. Clubs ----------------------------------------------------------------- */
.lr-clubs-box{
  display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--lr-s6);align-items:center;
  padding:clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.lr-clubs-box .lr-head{margin-bottom:0}
.lr-checks{display:grid;gap:.875rem}
.lr-check{display:flex;gap:var(--lr-s3);line-height:1.5}
.lr-check .lr-icon{margin-top:2px;color:var(--lr-check, var(--lr-accent-2, currentColor))}
.lr-clubs-side .lr-btn{margin-top:var(--lr-s6)}

/* 9. Confiance ------------------------------------------------------------- */
.lr-trust-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--lr-s4)}
.lr-trust-item{
  display:flex;flex-direction:column;gap:var(--lr-s3);
  padding:var(--lr-s5) 1.25rem;border-radius:var(--lr-radius, 18px);
  background:var(--lr-surface, rgba(255,255,255,.05));
  border:1px solid var(--lr-border, rgba(255,255,255,.14));
}
.lr-trust-icon{color:var(--lr-accent, inherit)}
.lr-trust-t{font-weight:600;line-height:1.4}

/* 10. Tarifs --------------------------------------------------------------- */
.lr-price-box{
  display:grid;grid-template-columns:minmax(0, 1fr);overflow:hidden;
  max-width:40rem;margin-inline:auto;
}
.lr-calc,.lr-price-summary{min-width:0;padding:clamp(1.5rem, 1rem + 2.5vw, 2.75rem)}
.lr-calc{display:flex;flex-direction:column;justify-content:center;background:var(--lr-calc-bg, transparent)}
.lr-price-summary{
  background:var(--lr-summary-bg, transparent);
  border-top:1px solid var(--lr-border, rgba(255,255,255,.14));
}
.lr-calc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--lr-s3)}
.lr-calc-label{margin:0;font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);font-weight:600}
.lr-calc-count{display:inline-flex;align-items:center;gap:var(--lr-s2)}
.lr-calc-input{
  width:5.5rem;height:2.75rem;padding:0 .5rem;text-align:center;
  font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);font-size:1.125rem;font-weight:600;
  color:var(--lr-input-text, inherit);
  background:var(--lr-input-bg, var(--lr-surface-2, rgba(255,255,255,.08)));
  border:1px solid var(--lr-border, rgba(255,255,255,.2));border-radius:var(--lr-radius-sm, 10px);
}
.lr-calc-unit{font-size:.9375rem;color:var(--lr-muted, rgba(255,255,255,.72))}
.lr-range{display:block;width:100%;height:28px;margin:var(--lr-s5) 0 var(--lr-s3);cursor:pointer;accent-color:var(--lr-range, var(--lr-accent-2, currentColor))}
/* Devise et mode de paiement (affiches par le script) : vrais boutons radio,
   transparents, poses sur leur pastille — clic, toucher, fleches du clavier
   restent natifs. 44px de haut ; sur telephone, parts egales (points de
   rupture). Jetons --lr-cur-* facultatifs : replis sur ceux du champ et du
   badge. */
.lr-cur{min-width:0;margin:var(--lr-s2) 0 0;padding:0;border:0}
/* Mode de paiement, en tete du bloc. Des mots, pas des codes : espacement
   normal, et retour a la ligne dans la pastille si l'ecran est tres etroit. */
.lr-cur--bill{margin:0 0 var(--lr-s5)}
.lr-cur--bill .lr-cur-pill{letter-spacing:.01em;line-height:1.2;text-align:center}
.lr-cur-list{display:flex;flex-wrap:wrap;gap:var(--lr-s2)}
.lr-cur-opt{position:relative;display:inline-flex;margin:0}
.lr-cur-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lr-cur-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:3.25rem;min-height:2.75rem;padding:0 .875rem;border-radius:999px;
  font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);
  font-size:.875rem;font-weight:600;line-height:1;letter-spacing:.06em;
  color:var(--lr-cur-text, var(--lr-muted, rgba(255,255,255,.72)));
  background:var(--lr-cur-bg, var(--lr-input-bg, rgba(255,255,255,.04)));
  border:1px solid var(--lr-cur-border, var(--lr-border, rgba(255,255,255,.2)));
  transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}
.lr-cur-input:hover + .lr-cur-pill{color:var(--lr-text, #fff);border-color:var(--lr-cur-border-hover, rgba(255,255,255,.4))}
/* Cochee : fond teinte, filet double, texte plein — pas la seule couleur. */
.lr-cur-input:checked + .lr-cur-pill{
  color:var(--lr-cur-on-text, var(--lr-heading, #fff));
  background:var(--lr-cur-on-bg, var(--lr-badge-bg, rgba(255,255,255,.14)));
  border-color:var(--lr-cur-on-border, var(--lr-accent-2, currentColor));
  box-shadow:inset 0 0 0 1px var(--lr-cur-on-border, var(--lr-accent-2, currentColor));
}
/* Le bouton est transparent : l'anneau de focus passe sur la pastille. */
.lr-cur-input:focus-visible + .lr-cur-pill{outline:3px solid var(--lr-focus, currentColor);outline-offset:3px}
.lr-badge{
  display:inline-block;padding:.3125rem .75rem;border-radius:999px;
  font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);
  font-size:var(--lr-fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.4;
  color:var(--lr-badge-text, var(--lr-accent-2, inherit));
  background:var(--lr-badge-bg, rgba(255,255,255,.08));
}
.lr-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--lr-s2) var(--lr-s3);margin-top:var(--lr-s4)}
.lr-price-v{font-size:var(--lr-fs-price);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--lr-price, inherit)}
.lr-price-old{font-size:1.0625rem;color:var(--lr-faint, rgba(255,255,255,.55))}
.lr-price-period{font-size:1.0625rem;color:var(--lr-muted, rgba(255,255,255,.72))}   /* « par mois », mensuel */
.lr-price-note{margin-top:var(--lr-s2);font-size:var(--lr-fs-small);color:var(--lr-muted, rgba(255,255,255,.72))}
.lr-price-per{
  margin-top:var(--lr-s4);padding-top:var(--lr-s3);
  border-top:1px solid var(--lr-border-soft, rgba(255,255,255,.08));
  color:var(--lr-muted, rgba(255,255,255,.72));
}
.lr-price-per-v{font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);font-weight:600;color:var(--lr-price, inherit);white-space:nowrap}
/* « ≈ » des montants convertis (pose par le script). Poppins n'a pas le
   glyphe : police du texte, partout la meme ; discret sur le grand prix, qui
   garde ainsi la largeur du montant en CHF. */
.lr-approx{font-family:var(--lr-font-body, "Trebuchet MS", "Segoe UI", sans-serif)}
.lr-price-v .lr-approx{font-size:.6em;font-weight:400;letter-spacing:0;vertical-align:.2em;color:var(--lr-muted, rgba(255,255,255,.72))}
/* Hors CHF : taux et date de la BCE, facturation en CHF. */
.lr-fx-note{
  margin-top:var(--lr-s3);padding-inline-start:var(--lr-s3);
  border-inline-start:2px solid var(--lr-accent, currentColor);
  font-size:var(--lr-fs-small);line-height:1.5;text-wrap:pretty;
  color:var(--lr-muted, rgba(255,255,255,.72));
}
.lr-disclaimer{margin-top:var(--lr-s4);font-size:.8125rem;color:var(--lr-faint, rgba(255,255,255,.55))}
.lr-price-summary .lr-actions{margin-top:var(--lr-s5)}
.lr-price-summary .lr-reassure{margin-top:var(--lr-s3)}

/* 11. FAQ ------------------------------------------------------------------ */
.lr-faq-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--lr-s6);align-items:start}
.lr-faq-grid .lr-head{margin-bottom:0}
.lr-faq-list{border-top:1px solid var(--lr-border, rgba(255,255,255,.14))}
.lr-faq-item{border-bottom:1px solid var(--lr-border, rgba(255,255,255,.14))}
.lr-faq-q{
  position:relative;display:block;list-style:none;cursor:pointer;
  padding:1.125rem 2.5rem 1.125rem 0;
  font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);font-weight:600;font-size:1.0625rem;line-height:1.4;
}
.lr-faq-q::-webkit-details-marker{display:none}
.lr-faq-q::after{
  content:"";position:absolute;right:.375rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--lr-accent, currentColor);border-bottom:2px solid var(--lr-accent, currentColor);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.lr-faq-item[open] > .lr-faq-q::after{transform:translateY(-30%) rotate(-135deg)}
.lr-faq-a{padding-bottom:1.25rem}
.lr-faq-a p{max-width:62ch;color:var(--lr-muted, rgba(255,255,255,.72));text-wrap:pretty}

/* 12. CTA final ------------------------------------------------------------ */
.lr-final{text-align:center}
.lr-final-inner{display:flex;flex-direction:column;align-items:center}
.lr-final .lr-h2{max-width:20ch;margin-inline:auto;font-size:clamp(1.875rem, 1.3rem + 2.6vw, 3rem)}
.lr-final .lr-lead{margin-inline:auto}
.lr-final .lr-actions{margin-top:var(--lr-s6)}

/* Pied de page -------------------------------------------------------------
   app.css.php pose un footer « legacy » global (fond var(--color1), filet noir,
   texte centre, marges) : on le neutralise, le theme repeint. */
.lr-foot{
  position:static;margin:0;padding:clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 var(--lr-s6);
  border-top:1px solid var(--lr-foot-border, var(--lr-border, rgba(255,255,255,.14)));
  text-align:start;font-size:.9375rem;
  color:var(--lr-foot-text, var(--lr-muted, rgba(255,255,255,.72)));
  background:var(--lr-foot-bg, transparent);
}
.lr-foot-grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--lr-s6)}
.lr-foot-logo{display:inline-flex}
.lr-foot-logo img{display:block;width:56px;height:56px}
.lr-foot-tagline{margin-top:var(--lr-s3);color:var(--lr-text, inherit)}
.lr-foot-baseline{margin-top:var(--lr-s1);font-size:var(--lr-fs-small)}
.lr-foot-h{
  margin-bottom:var(--lr-s3);
  font-family:var(--lr-font-head, "Poppins", "Trebuchet MS", sans-serif);font-weight:600;font-size:.9375rem;
  color:var(--lr-heading, var(--lr-text, inherit));
}
.lr-foot-list{display:grid;gap:var(--lr-s1)}
.lr-foot-link{display:inline-block;padding-block:.25rem;text-decoration:none}
.lr-foot-link:hover{color:var(--lr-text, inherit);text-decoration:underline;text-underline-offset:3px}
.lr-foot-bottom{
  margin-top:clamp(2rem, 1.5rem + 2vw, 3rem);padding-top:var(--lr-s4);
  border-top:1px solid var(--lr-border-soft, rgba(255,255,255,.08));
  font-size:.8125rem;color:var(--lr-faint, rgba(255,255,255,.55));
}

/* Apparition au defilement (classe posee par page.php, jamais par le HTML). */
.lr-reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.lr-reveal.lr-is-in{opacity:1;transform:none}

/* Points de rupture ---------------------------------------------------------
   En fin de fichier : a specificite egale, la derniere regle l'emporte. */
@media (min-width:600px){
  .lr-stats{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .lr-trust-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .lr-foot-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width:900px){
  .lr-hero-grid{grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr)}
  .lr-problem-grid{grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);gap:clamp(2rem, 1rem + 4vw, 5rem)}
  .lr-benefits-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .lr-quotes{grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr)}
  .lr-clubs-box{grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(2rem, 1rem + 3vw, 4rem)}
  .lr-faq-grid{grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:clamp(2rem, 1rem + 4vw, 5rem)}
  .lr-foot-grid{grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr))}
  /* L'alerte deborde de la carte, comme dans la maquette Bumps. */
  .lr-mock-alert{position:absolute;left:-1.25rem;bottom:-1.75rem;max-width:18rem;margin-top:0}
  .lr-hero-visual--mock .lr-mock-card{padding-bottom:3.5rem}   /* la legende reste visible sous l'alerte */
  .lr-hero-visual--mock .lr-visual-caption{margin-top:var(--lr-s7);text-align:end}
}
@media (min-width:1100px){
  .lr-trust-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
/* Telephone etroit : le bouton principal prend la largeur, plus facile au pouce. */
@media (max-width:479.98px){
  .lr-hero-actions{align-items:stretch}
  .lr-hero-actions .lr-btn,.lr-price-summary .lr-actions .lr-btn{width:100%}
  /* Devises : parts egales sur toute la largeur, comme le bouton (quatre sur
     une ligne des 320px, deux par deux en dessous). */
  .lr-cur-list{display:grid;grid-template-columns:repeat(auto-fit, minmax(3.25rem, 1fr))}
  .lr-cur-pill{flex:1 1 auto;min-width:0;padding-inline:.5rem}
}
/* Sous 360px, le grand prix a quatre chiffres (« ≈ USD 6’485.60 ») depassait
   de sa colonne : un cran plus petit. */
@media (max-width:359.98px){
  .lr{--lr-fs-price:2.125rem}
}
/* Sous 320px, quatre pastilles ne tiennent plus : auto-fit en mettrait trois,
   GBP seule dessous. Deux par deux, a pas fixe. */
@media (max-width:319.98px){
  .lr-cur-list{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* Mouvement reduit : rien n'apparait, rien ne glisse. */
@media (prefers-reduced-motion:no-preference){
  html:has(.lr){scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  .lr-reveal{opacity:1;transform:none;transition:none}
  .lr-mock-alert{animation:none}
  .lr-btn,.lr-faq-q::after,.lr-link .lr-icon,.lr-more .lr-icon,.lr-cur-pill{transition:none}
  .lr-btn:hover,.lr-link:hover .lr-icon,.lr-more:hover .lr-icon{transform:none}
}

/* Impression, « Enregistrer en PDF » : tout est visible, sans attendre le
   defilement (page.php pose aussi .lr-is-in au beforeprint). Les deux
   propositions circulent en captures annotees. */
@media print{
  .lr-reveal{opacity:1;transform:none;transition:none}
  .lr-mock-alert{animation:none}
}

/* Bandeau des clubs a l'arret a l'impression seulement. Sous mouvement
   reduit, il defile comme sur la landing en service : app.css.php le ralentit
   a 80 s (choix produit, l'iPhone en « Reduire les animations » le voyait
   fige). Fige tel
   quel, il ne montrerait que les logos du moment, rognes par le fondu : les
   cinq clubs sont donc poses une fois, centres, sur une ou plusieurs lignes.
   Le composant double la liste pour la boucle (seconde moitie aria-hidden,
   doublons a alt vide) : ce sont eux qui sortent. */
@media print{
  .lr .lr-logos .logo-loop{-webkit-mask-image:none;mask-image:none}
  .lr-logos .logo-track{display:block;width:auto;animation:none}
  /* Sans boucle, l'ecart de fin decentrerait la liste. */
  .lr-logos .logo-list{flex-wrap:wrap;justify-content:center;padding-inline-end:0}
  .lr-logos .logo-list[aria-hidden="true"],
  .lr-logos .logo-item:has(> img[alt=""]){display:none}
  .lr-logos .logo-item{min-width:0}
}

/* Contraste force : les fonds disparaissent, les contours restent. */
@media (forced-colors:active){
  .lr-btn--primary{border-color:ButtonText}
  .lr-mock-dot--player,.lr-mock-dot--coach,.lr-mock-key::before,.lr-mock-gap{forced-color-adjust:none}
  /* Sans fond ni ombre, la devise cochee ne se verrait plus. */
  .lr-cur-input:checked + .lr-cur-pill{forced-color-adjust:none;color:HighlightText;background:Highlight;border-color:Highlight;box-shadow:none}
  /* Hors ajustement, son anneau garderait --lr-focus et le halo de /new
     (0,5,0, charge apres) : anneau systeme, plus specifique. */
  .lr .lr-cur .lr-cur-input:checked:focus-visible + .lr-cur-pill{outline-color:CanvasText;box-shadow:none}
}