/* ─────────────────────────────────────────────────────────────────────────────
   Refonte de la landing — proposition 2 (/new2) : THEME SOMBRE Bumps.

   Charge en dernier (apres app.css.php, landing.v2.css, landing.next.css et
   views.view.landing.rework.css) : la structure vient de rework.css, ce fichier
   ne pose que des jetons --lr-* et l'habillage.

   Portee : tout est sous .lr--dark (le conteneur de page.php) ou sous
   body:has(.lr--dark) pour ce qui est rendu hors du conteneur (fond de page,
   barre navigationLanding.php, lien d'evitement). Aucune autre page n'en recoit
   rien. Sans :has() (navigateurs d'avant 2023), la page reste lisible : le
   conteneur peint son propre fond sombre, seule la barre garde son verre.

   Maquette de reference : Bumps, « Proposition de landing page » (theme sombre).
   Palette : navy #0b1648 / navy profond #06162e / bleu #2c5f8e / cyan #61c7d3 /
   teal #22b39d / lime #9af557. Degrade teal → lime pour le bouton principal et
   la bande du CTA final. Sections alternees navy / navy profond, vague apres le
   hero.

   Polices : Poppins (600, 700, 800) est deja auto-hebergee par
   views.view.landing.v2.css, chargee avant ce fichier : pas d'appel a Google
   Fonts (aucune adresse IP de visiteur transmise a un tiers). Corps en
   Trebuchet MS, comme le site.

   Hierarchie Bumps : un seul bouton plein par section (degrade), le secondaire
   en contour, le reste en lien texte.
   ───────────────────────────────────────────────────────────────────────────── */

/* Jetons ------------------------------------------------------------------- */
.lr--dark{
  /* Tier 1 : palette de la marque */
  --lr-navy:#0b1648;
  --lr-navy-deep:#06162e;
  --lr-blue:#2c5f8e;
  --lr-cyan:#61c7d3;
  --lr-teal:#22b39d;
  --lr-lime:#9af557;
  --lr-white:#f6fbff;
  --lr-red:#ff9f9f;
  --lr-grad:linear-gradient(135deg, var(--lr-teal) 0%, var(--lr-lime) 100%);
  --lr-grad-x:linear-gradient(90deg, var(--lr-teal) 0%, var(--lr-lime) 100%);
  --lr-glass:rgba(44,95,142,.18);
  --lr-glass-b:rgba(255,255,255,.16);
  --lr-shadow:0 24px 80px rgba(4,10,31,.38);

  /* Tier 2 : roles lus par rework.css */
  --lr-bg:var(--lr-navy);
  --lr-section-bg:var(--lr-navy);
  --lr-text:var(--lr-white);
  --lr-heading:#fff;
  --lr-muted:rgba(246,251,255,.76);   /* ≥ 8:1 sur navy et sur les cartes */
  --lr-faint:rgba(246,251,255,.62);   /* ≥ 6:1 sur navy profond, ≥ 5:1 sur cartes */
  --lr-accent:var(--lr-cyan);
  --lr-accent-2:var(--lr-lime);
  --lr-danger:var(--lr-red);
  --lr-surface:var(--lr-glass);
  --lr-surface-2:rgba(44,95,142,.32);
  --lr-border:var(--lr-glass-b);
  --lr-border-soft:rgba(255,255,255,.08);
  --lr-radius:18px;
  --lr-radius-sm:12px;
  --lr-radius-btn:12px;
  --lr-card-shadow:none;

  /* Boutons et liens : poids decroissant */
  --lr-cta-bg:var(--lr-grad);
  --lr-cta-text:var(--lr-navy-deep);
  --lr-cta-shadow:0 10px 30px -10px rgba(154,245,87,.55);
  --lr-cta-shadow-hover:0 14px 34px -10px rgba(154,245,87,.7);
  --lr-btn2-bg:rgba(255,255,255,.04);
  --lr-btn2-text:var(--lr-white);
  --lr-btn2-border:rgba(255,255,255,.24);
  --lr-btn2-border-hover:var(--lr-cyan);
  --lr-link:var(--lr-cyan);
  --lr-link-hover:var(--lr-lime);
  --lr-eyebrow:var(--lr-cyan);
  --lr-focus:var(--lr-cyan);
  --lr-todo:var(--lr-lime);

  --lr-font-head:"Poppins", "Trebuchet MS", "Segoe UI", sans-serif;
  --lr-font-body:"Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  /* Tier 3 : composants */
  --lr-stat:var(--lr-lime);
  --lr-track:rgba(255,255,255,.08);
  --lr-icon-bg:rgba(97,199,211,.14);
  --lr-bullet:var(--lr-lime);
  /* Mots-cles en vert (document du 28.09.2026) : lime sur pastille teintee,
     9:1 sur la carte des benefices. */
  --lr-tag-text:var(--lr-lime);
  --lr-tag-bg:rgba(154,245,87,.12);
  --lr-tag-border:rgba(154,245,87,.4);
  --lr-check:var(--lr-lime);
  --lr-pain-bg:linear-gradient(90deg, rgba(255,159,159,.09), rgba(255,159,159,.02));
  --lr-pain-icon-bg:rgba(255,159,159,.12);
  --lr-avatar-bg:var(--lr-blue);
  --lr-avatar-text:#fff;
  --lr-avatar-ring:var(--lr-cyan);
  --lr-calc-bg:linear-gradient(160deg, rgba(44,95,142,.5), rgba(11,22,72,.9));
  --lr-summary-bg:rgba(6,22,46,.88);
  --lr-input-bg:rgba(6,22,46,.6);
  --lr-input-text:var(--lr-white);
  --lr-range:var(--lr-lime);
  --lr-badge-bg:rgba(154,245,87,.14);
  --lr-badge-text:var(--lr-lime);
  --lr-price:#fff;
  --lr-foot-bg:var(--lr-navy-deep);
  --lr-foot-text:rgba(246,251,255,.76);
  --lr-foot-border:transparent;
  --lr-shot-shadow:var(--lr-shadow);

  /* Maquette du hero */
  --lr-mock-bg:linear-gradient(160deg, rgba(44,95,142,.55), rgba(6,22,46,.9));
  --lr-mock-shadow:var(--lr-shadow);
  --lr-mock-player:var(--lr-cyan);
  --lr-mock-coach:var(--lr-lime);
  --lr-mock-gap:linear-gradient(90deg, var(--lr-cyan), var(--lr-lime));
  --lr-mock-dot-ring:var(--lr-navy-deep);
  --lr-mock-badge-bg:rgba(154,245,87,.14);
  --lr-mock-badge-text:var(--lr-lime);
  --lr-mock-alert-bg:var(--lr-navy-deep);

  /* Vague sous le hero : sa face arriere prend la couleur de la preuve sociale */
  --lr-wave-1:var(--lr-teal);
  --lr-wave-2:var(--lr-lime);
  --lr-wave-back:var(--lr-navy-deep);
  --lr-wave-opacity:.9;

  color-scheme:dark;
}

/* Fond de page, hors conteneur -----------------------------------------------
   app.css.php peint les vagues du site sur body (≥ 768px) et sur un body::before
   fixe (telephone). Ici la page est sombre de bout en bout. */
body:has(.lr--dark){
  background:#0b1648;
  scrollbar-color:rgba(246,251,255,.28) #06162e;
}
body:has(.lr--dark)::before{content:none;display:none}

.lr--dark ::selection{background:rgba(154,245,87,.32);color:#fff}

/* Lien d'evitement (rendu avant la barre, donc hors .lr) */
body:has(.lr--dark) .lr-skip{
  background:#9af557;color:#06162e;
  font-family:"Poppins", "Trebuchet MS", sans-serif;font-weight:600;
}

/* Barre du haut (navigationLanding.php) -----------------------------------------
   En-tete collant de la maquette : navy profond translucide et flou, filet fin,
   liens discrets, « Se connecter » en texte, « Essai gratuit » seul bouton plein.
   Quelques !important : app.css.php en pose sur .nav-auth .btn-easyidp et sur
   la couleur des liens de la barre, il n'y a pas d'autre moyen de les depasser.
   Meme barre sur les pages /features (.landing-feature, qui chargent cette
   feuille pour elle seule : le reste vise .lr--dark). */
body:has(.lr--dark, .landing-feature) .nav-glass{
  background:rgba(6,22,46,.84);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
body:has(.lr--dark, .landing-feature) .nav-glass .navbar-brand img{height:42px;filter:none}

body:has(.lr--dark, .landing-feature) .nav-anchors .nav-link{
  font-family:"Trebuchet MS", "Segoe UI", sans-serif;
  font-size:.9375rem;font-weight:400;letter-spacing:0;
  opacity:.8;
}
body:has(.lr--dark, .landing-feature) .nav-anchors .nav-link:hover,
body:has(.lr--dark, .landing-feature) .nav-anchors .nav-link:focus-visible{opacity:1;color:#fff !important}
body:has(.lr--dark, .landing-feature) .nav-glass .navbar-nav .nav-link::after{
  background:linear-gradient(90deg, #22b39d, #9af557);
  bottom:-2px;
}

/* Se connecter : un lien texte, pas un second bouton */
body:has(.lr--dark, .landing-feature) .nav-auth .btn-easyidp{
  padding:.5rem .75rem;
  font-family:"Trebuchet MS", "Segoe UI", sans-serif;
  font-size:.9375rem;font-weight:400;letter-spacing:0;
  color:#f6fbff !important;
  box-shadow:none;
}
body:has(.lr--dark, .landing-feature) .nav-auth .btn-easyidp:hover{
  transform:none;filter:none;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}

/* Essai gratuit : le bouton principal de la maquette, en plus compact */
body:has(.lr--dark, .landing-feature) .btn-nav-trial{
  min-height:42px;padding:0 1.125rem;
  border:0;border-radius:12px;
  font-family:"Poppins", "Trebuchet MS", sans-serif;font-size:.875rem;font-weight:600;letter-spacing:0;
  color:#06162e;
  background:linear-gradient(135deg, #22b39d 0%, #9af557 100%);
  box-shadow:0 10px 30px -10px rgba(154,245,87,.55);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body:has(.lr--dark, .landing-feature) .btn-nav-trial:hover{
  color:#06162e;filter:brightness(1.05);transform:translateY(-1px);
  box-shadow:0 14px 34px -10px rgba(154,245,87,.7);
}
body:has(.lr--dark, .landing-feature) .btn-nav-trial:focus-visible{outline:3px solid #61c7d3;outline-offset:3px}

/* Selecteur de langue : pastille fantome. Le degrade teal → lime d'app.css.php
   ferait un second bouton plein a cote d'« Essai gratuit ». */
body:has(.lr--dark, .landing-feature) .nav-glass .lang-switch > summary.lang-switch-current{
  color:#f6fbff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none;
}
body:has(.lr--dark, .landing-feature) .nav-glass .lang-switch > summary.lang-switch-current:hover{
  filter:none;border-color:#61c7d3;
}

/* Focus clavier dans la barre : l'anneau cyan plein de la page. Les replis du
   site (anneau --ring a 28 %, ombre bleue de Bootstrap sur .nav-link, rien sur
   le selecteur de langue) ne se voient pas sur ce navy. (0,3,1) : passe devant
   .nav-link:focus-visible de Bootstrap et l'outline:none du selecteur. */
body:has(.lr--dark, .landing-feature) .nav-glass :focus-visible{outline:3px solid #61c7d3;outline-offset:3px;box-shadow:none}

/* Telephone et tablette : la barre repliee garde « Essai gratuit » a cote du
   menu — regle commune aux deux propositions, dans rework.css. */

/* Typographie commune ------------------------------------------------------- */
.lr--dark .lr-h1,
.lr--dark .lr-h2{color:var(--lr-heading)}

/* Sur-titre : petite barre degradee devant le libelle. */
.lr--dark .lr-eyebrow,
.lr--dark .lr-h2--label{
  display:flex;align-items:center;gap:.625rem;
}
.lr--dark .lr-eyebrow::before,
.lr--dark .lr-h2--label::before{
  content:"";flex:none;width:1.5rem;height:2px;border-radius:2px;
  background:var(--lr-grad-x);
}
.lr--dark .lr-head--center .lr-eyebrow{justify-content:center}

/* Texte en degrade (accent du h1, grands chiffres) : lime plein par defaut, le
   degrade seulement la ou background-clip:text existe. */
.lr--dark .lr-h1-accent{color:var(--lr-lime)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lr--dark .lr-h1-accent,
  .lr--dark .lr-stat-v{
    background:var(--lr-grad-x);
    -webkit-background-clip:text;background-clip:text;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
    color:transparent;
  }
}

/* Liens et boutons ------------------------------------------------------------ */
.lr--dark .lr-btn--primary:hover{box-shadow:var(--lr-cta-shadow-hover, var(--lr-cta-shadow))}
.lr--dark .lr-btn--secondary:hover{background:rgba(97,199,211,.08)}
.lr--dark .lr-link{font-family:var(--lr-font-body)}

/* A valider / a fournir : pointille lime de la maquette, pastille teintee. */
.lr--dark .lr-todo{background:rgba(154,245,87,.08)}
.lr--dark .lr-todo-tag{
  color:var(--lr-lime);
  background:rgba(154,245,87,.14);
  border-color:rgba(154,245,87,.6);
}
.lr--dark .lr-quote--todo .lr-quote-text .lr-todo,
.lr--dark .lr-faq-item--todo .lr-faq-a .lr-todo{background:none}
.lr--dark .lr-quote--todo .lr-quote-text > p,
.lr--dark .lr-faq-item--todo .lr-faq-a > p{background:rgba(154,245,87,.06);padding:.25rem .5rem}

/* 2. Hero -------------------------------------------------------------------
   Halo bleu en haut a droite, derriere la maquette, puis la vague signature. */
.lr--dark .lr-hero{
  --lr-section-bg:
    radial-gradient(120% 90% at 85% 10%, rgba(44,95,142,.75) 0%, rgba(11,22,72,0) 60%),
    var(--lr-navy);
  padding-bottom:0;
}
.lr--dark .lr-focus-item{color:var(--lr-muted)}
.lr--dark .lr-hero-sub{color:var(--lr-muted)}
.lr--dark .lr-reassure{color:var(--lr-faint)}
.lr--dark .lr-hero-alt{color:var(--lr-muted)}

/* Maquette : carte vitree, pastilles joueur (cyan) / coach (lime) */
.lr--dark .lr-mock-card{border-color:var(--lr-glass-b)}
.lr--dark .lr-mock-name{color:#fff}
.lr--dark .lr-mock-goal-label{color:var(--lr-white)}
.lr--dark .lr-mock-alert{
  color:var(--lr-white);
  border-color:rgba(255,159,159,.45);
}
.lr--dark .lr-hero-visual--mock .lr-visual-caption{color:var(--lr-faint)}

/* La vague mesure une hauteur fractionnaire (120/1440 de la largeur) : sa
   derniere rangee de pixels, a moitie couverte, laissait un filet clair. La
   section suivante la recouvre (position:relative la peint par-dessus). */
.lr--dark .lr-wave{
  display:block;
  margin-top:clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  margin-bottom:-2px;
}

/* 3. Preuve sociale ------------------------------------------------------------
   Navy profond, collee sous la vague. Chiffres en grand, puis le bandeau des
   clubs, logos en tuiles qui defilent (certains ecussons sont sombres : la
   tuile leur donne un fond commun). Pas de filet : l'espace de la grille
   suffit a separer. */
.lr--dark .lr-proof{
  --lr-section-bg:var(--lr-navy-deep);
  position:relative;
  padding-top:clamp(1rem, .5rem + 2vw, 2rem);
}
.lr--dark .lr-h2--label{color:var(--lr-eyebrow)}
.lr--dark .lr-stat-v{align-self:flex-start}
.lr--dark .lr-stat-l{color:var(--lr-muted);font-size:1rem}
.lr--dark .lr-logos{padding-top:0;border-top:0}
.lr--dark .lr-logos .logo-item{
  height:clamp(4.5rem, 3.9rem + 1.8vw, 5.5rem);
  padding:.75rem 1rem;
  border:1px solid var(--lr-border-soft);border-radius:14px;
  background:rgba(255,255,255,.035);
}
.lr--dark .lr-logos .logo-item img{max-height:100%}

/* 4. Probleme -------------------------------------------------------------------
   Meme bande navy profond que la preuve sociale : on resserre la jointure. */
.lr--dark .lr-problem{
  --lr-section-bg:var(--lr-navy-deep);
  padding-top:calc(var(--lr-section-space) * .6);
}
.lr--dark .lr-pain{border-inline-start-color:var(--lr-red)}
.lr--dark .lr-pain-t{color:#fff}
.lr--dark .lr-pain-d{color:var(--lr-muted)}

/* 6. Benefices -------------------------------------------------------------------
   Bande navy apres le navy profond du probleme, espacement plein ; cartes
   legeres, pas de lift au survol (la carte n'est pas un lien, seul « En savoir
   plus » l'est). */
.lr--dark .lr-benefits{--lr-section-bg:var(--lr-navy)}
.lr--dark .lr-benefit{
  background:rgba(255,255,255,.025);
  border-color:var(--lr-border-soft);
}
.lr--dark .lr-benefit-t{color:#fff}
.lr--dark .lr-bullets li{color:var(--lr-muted)}
.lr--dark .lr-more{color:var(--lr-cyan)}
.lr--dark .lr-more:hover{color:var(--lr-lime)}

/* 7. Temoignages --------------------------------------------------------------------
   Halo bleu de la maquette derriere les cartes ; le fond passe du navy (bande
   precedente) au navy profond (bloc clubs) pour que les jointures ne cassent pas. */
.lr--dark .lr-testimonials{
  --lr-section-bg:
    radial-gradient(75% 55% at 50% 52%, rgba(44,95,142,.6) 0%, rgba(44,95,142,0) 70%),
    linear-gradient(180deg, var(--lr-navy) 0%, var(--lr-navy-deep) 100%);
  --lr-surface:rgba(6,22,46,.55);
}
.lr--dark .lr-quote--featured{
  background:rgba(6,22,46,.82);
  border-color:rgba(154,245,87,.4);
}
.lr--dark .lr-quote--featured .lr-quote-text{color:#fff}
.lr--dark .lr-quote--todo{
  background:rgba(6,22,46,.35);
  border-color:rgba(154,245,87,.35);
}
.lr--dark .lr-quote-name{color:#fff}
.lr--dark .lr-avatar--logo{background:var(--lr-white);border-color:rgba(154,245,87,.55)}

/* 8. Clubs -------------------------------------------------------------------------
   Bloc court, halo bleu en haut a droite ; son seul CTA est en contour. */
.lr--dark .lr-clubs{
  --lr-section-bg:var(--lr-navy-deep);
  padding-top:calc(var(--lr-section-space) * .4);   /* les temoignages finissent deja en navy profond */
}
.lr--dark .lr-clubs-box{
  border-radius:24px;
  border-color:var(--lr-glass-b);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(44,95,142,.6), rgba(6,22,46,0) 70%),
    rgba(44,95,142,.06);
}
.lr--dark .lr-check{color:var(--lr-white)}

/* 9. Confiance ------------------------------------------------------------------------
   Les quatre points forment un seul bloc a filets (maquette). */
.lr--dark .lr-trust{
  --lr-section-bg:var(--lr-navy-deep);
  padding-top:calc(var(--lr-section-space) * .25);
}
.lr--dark .lr-trust-grid{
  gap:1px;overflow:hidden;
  background:var(--lr-glass-b);
  border:1px solid var(--lr-glass-b);
  border-radius:var(--lr-radius);
}
.lr--dark .lr-trust-item{
  border:0;border-radius:0;
  background:var(--lr-navy-deep);
  padding:1.625rem 1.375rem;
}
.lr--dark .lr-trust-t{color:#fff}
.lr--dark .lr-trust-icon .lr-icon--swiss{color:var(--lr-red)}

/* 10. Tarifs --------------------------------------------------------------------------
   Retour au navy, halo centre derriere la boite de prix. */
.lr--dark .lr-pricing{
  --lr-section-bg:
    radial-gradient(60% 55% at 50% 62%, rgba(44,95,142,.42) 0%, rgba(11,22,72,0) 70%),
    var(--lr-navy);
}
.lr--dark .lr-price-box{
  border-radius:24px;
  border-color:var(--lr-glass-b);
  background:var(--lr-navy-deep);
  box-shadow:var(--lr-shadow);
}
.lr--dark .lr-calc-label{color:#fff}
.lr--dark .lr-calc-input{border-color:var(--lr-glass-b)}
.lr--dark .lr-calc-input:focus-visible{border-color:var(--lr-cyan)}
.lr--dark .lr-price-summary{border-color:var(--lr-glass-b)}

/* 11. FAQ -------------------------------------------------------------------------------- */
.lr--dark .lr-faq{--lr-section-bg:var(--lr-navy-deep)}
.lr--dark .lr-faq-q{color:#fff;transition:color .15s ease}
.lr--dark .lr-faq-q:hover{color:var(--lr-cyan)}
.lr--dark .lr-faq-item[open] > .lr-faq-q{color:var(--lr-lime)}

/* 12. CTA final ------------------------------------------------------------------------
   Bande degradee teal → lime, texte navy profond. Le bouton s'inverse (navy
   plein, texte clair) : un degrade sur un degrade ne se verrait pas. */
.lr--dark .lr-final{
  --lr-section-bg:
    radial-gradient(70% 120% at 50% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
    var(--lr-grad);
  --lr-text:var(--lr-navy-deep);
  --lr-heading:var(--lr-navy-deep);
  --lr-muted:rgba(6,22,46,.86);
  --lr-cta-bg:var(--lr-navy-deep);
  --lr-cta-text:var(--lr-white);
  --lr-cta-shadow:0 14px 30px -12px rgba(6,22,46,.7);
  --lr-cta-shadow-hover:0 18px 36px -12px rgba(6,22,46,.8);
  --lr-link:var(--lr-navy-deep);
  --lr-link-hover:var(--lr-navy);
  --lr-focus:var(--lr-navy-deep);
}
.lr--dark .lr-final .lr-h2{color:var(--lr-navy-deep)}
.lr--dark .lr-final .lr-lead{font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem)}
.lr--dark .lr-final .lr-link{font-weight:700}
.lr--dark .lr-final ::selection{background:rgba(6,22,46,.85);color:#fff}

/* Pied de page ---------------------------------------------------------------------------- */
.lr--dark .lr-foot-h{color:#fff}
.lr--dark .lr-foot-tagline{color:var(--lr-white)}
.lr--dark .lr-foot-link:hover{color:#fff}
.lr--dark .lr-foot-bottom{color:var(--lr-faint)}

/* Points de rupture ---------------------------------------------------------------------- */
@media (min-width:600px){
  /* Filets verticaux entre les chiffres */
  .lr--dark .lr-stat + .lr-stat{
    padding-inline-start:var(--lr-s5);
    border-inline-start:1px solid var(--lr-border-soft);
  }
}

/* Contraste force : les degrades disparaissent, le texte doit rester visible. */
@media (forced-colors:active){
  .lr--dark .lr-h1-accent,
  .lr--dark .lr-stat-v{background:none;color:CanvasText}
  body:has(.lr--dark, .landing-feature) .btn-nav-trial{border:1px solid ButtonText}
}