/* ─────────────────────────────────────────────────────────────────────────────
   Couche des landings *.v2.php.

   Les vues view.landing.<segment>.v2.php chargent app.css.php, puis
   views.view.landing.v2.css, puis ce fichier. Elles portent donc la classe
   .landing-v2 (tout l'acquis : grilles, cartes, calculateur, pied de page) plus
   .landing-next, qui n'existe que pour ce que ces pages ajoutent :

     · une maquette de l'application dans le hero et dans chaque pilier ;
     · une hierarchie typographique plus haute et plus aeree ;
     · des etiquettes et un lien de sortie sur les cartes ;
     · une rangee de chiffres a la place de la pastille de preuve sociale ;
     · des ancres de section et un CTA d'essai dans la barre ;
     · une apparition au defilement.

   Les trois pages d'origine ne chargent pas ce fichier et ne changent pas.
   Le fond a vagues reste celui du site : ce n'est pas ce que cette couche
   traite.
   ───────────────────────────────────────────────────────────────────────────── */

/* Hierarchie ---------------------------------------------------------------
   Les references du secteur montent leurs titres de section a 40-56px ; nous
   etions a 23, soit a peine plus que le corps de texte. Et .section avait ete
   serre a 26px pour tuer un vide de 160px : la respiration revient, sans le
   trou. */
.landing-next .lv-h1{font-size:clamp(32px,5vw,52px);line-height:1.06}
.landing-next .lv-sub{font-size:17px;max-width:52ch}
.landing-next .section{padding:clamp(28px,3.6vw,52px) clamp(16px,4vw,32px)}
.landing-next .lv-sec-h{
  font-size:clamp(26px,3.4vw,38px);line-height:1.15;max-width:30ch;margin-bottom:24px;
}
.landing-next .section > .lv-sec-eyebrow{margin-bottom:16px}

/* Maquette d'application dans le hero ---------------------------------------
   La colonne de droite ne portait qu'un pictogramme de 300px : depuis le
   retrait de la photo de fond elle sonnait vide, et surtout elle ne montrait
   pas le produit. */
.landing-next .lv-hero-app{position:relative;display:flex;align-items:center;justify-content:center}
.landing-next .lv-hero-app::before{
  /* Halo : detache la maquette du fond sans lui ajouter de cadre. */
  content:"";position:absolute;inset:-12% -6%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(97,199,211,.16), transparent 70%);
  pointer-events:none;
}
/* svg ET img : le visuel est une capture WebP du club de demonstration quand il
   en existe une, sinon la maquette SVG. Le cadre est le meme dans les deux cas.
   La bordure claire donne au visuel l'air d'une fenetre d'application posee sur
   la page, plutot que d'une image collee. */
.landing-next .lv-hero-app svg,
.landing-next .lv-hero-app img{
  position:relative;width:100%;max-width:560px;height:auto;display:block;
  border-radius:16px;border:1px solid var(--glass-b);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.landing-next .lv-hero-grid{grid-template-columns:1.12fr 1fr;gap:44px}

/* Apercu d'ecran dans les cartes -------------------------------------------- */
.landing-next .lv-shot-frame{
  margin-top:16px;border-radius:11px;overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
}
/* Les captures n'ont pas toutes le meme rapport (le radar est large, la liste
   des joueurs presque carree) : on ne force aucun cadrage, l'image garde ses
   proportions et la carte s'ajuste. */
.landing-next .lv-shot-frame svg,
.landing-next .lv-shot-frame img{display:block;width:100%;height:auto;border:1px solid var(--glass-b);border-radius:11px}

/* Etiquettes et lien de sortie ---------------------------------------------
   Une carte qui se termine sur deux puces ne mene nulle part. Les deux
   references terminent chacune des leurs par des etiquettes et un lien. */
.landing-next .lv-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.landing-next .lv-tag{
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid var(--glass-b);
  padding:4px 10px;border-radius:100px;white-space:nowrap;
}
.landing-next .lv-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:13.5px;font-weight:700;color:var(--easyidp-lime);text-decoration:none;
}
.landing-next .lv-more span{transition:transform .18s}
.landing-next .lv-more:hover{color:var(--easyidp-lime)}
.landing-next .lv-more:hover span{transform:translateX(4px)}
/* La carte reste un bloc, seul le lien est cliquable : le survol de la carte
   doit donc annoncer le lien, pas se contenter de la soulever. */
.landing-next .lv-pillar:hover .lv-more span{transform:translateX(4px)}
.landing-next .lv-pillar .card-body{display:flex;flex-direction:column}
.landing-next .lv-pillar .lv-more{margin-top:auto;padding-top:16px}

/* Chiffres de la preuve sociale ---------------------------------------------
   En grille de colonnes egales sur une carte pleine largeur, les quatre chiffres
   se retrouvaient a 350px les uns des autres et ne se lisaient plus comme une
   serie. En ligne, ils restent groupes quelle que soit la largeur. */
.landing-next .lv-stats{
  display:flex;flex-wrap:wrap;gap:14px clamp(28px,5vw,76px);
  margin-top:22px;padding-top:20px;border-top:1px solid var(--glass-b);
}
.landing-next .lv-stat{min-width:120px}
.landing-next .lv-stat-v{
  font-family:'Poppins',"Trebuchet MS",sans-serif;font-weight:800;
  font-size:clamp(26px,3vw,34px);line-height:1.1;color:var(--easyidp-lime);
}
.landing-next .lv-stat:nth-child(even) .lv-stat-v{color:var(--easyidp-cyan)}
.landing-next .lv-stat-l{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.35}

/* Barre de navigation ------------------------------------------------------- */
/* Pas de prefixe .landing-next ici : la barre est rendue AVANT le wrapper qui
   porte cette classe, un selecteur descendant ne l'atteindrait jamais. Ces deux
   classes n'existent de toute facon que si la vue declare des ancres ou le CTA
   d'essai — les pages legales, contact et « A propos » n'en ont aucune.

   La barre est dense (logo, liens du site, ancres, langue, connexion, essai) :
   sans marge, les ancres viennent coller le selecteur de langue. */
/* Le menu et les ancres forment un seul groupe a droite. C'est le menu qui
   porte le « auto » : sans quoi il restait suspendu au milieu de la barre,
   entre les liens du site et le reste. */
.nav-features{display:flex;margin:0 0 0 auto}
.nav-features .nav-link{font-size:14px;font-weight:600}
.nav-features-menu{
  background:linear-gradient(180deg, rgba(10,15,27,.96), rgba(10,15,27,.92));
  border:1px solid var(--glass-b);border-radius:14px;padding:6px;min-width:220px;
}
.nav-features-menu .dropdown-item{
  color:var(--ink);border-radius:10px;padding:9px 12px;font-size:14px;
}
.nav-features-menu .dropdown-item:hover,
.nav-features-menu .dropdown-item:focus{
  background:rgba(255,255,255,.08);color:var(--easyidp-lime);
}
.nav-anchors{display:flex;gap:2px;margin:0 clamp(12px,2vw,28px) 0 clamp(8px,1.4vw,18px)}
.nav-anchors .nav-link{font-size:14px;font-weight:600;opacity:.86}
.nav-anchors .nav-link:hover{opacity:1;color:var(--easyidp-cyan) !important}
.btn-nav-trial{
  display:inline-flex;align-items:center;padding:.5rem .95rem;border-radius:14px;
  font-weight:800;font-size:14px;white-space:nowrap;text-decoration:none;
  color:var(--easyidp-navy);background:var(--easyidp-lime);
  border:1px solid rgba(154,245,87,.5);
  transition:transform .12s, filter .2s;
}
.btn-nav-trial:hover{transform:translateY(-1px);filter:brightness(1.05);color:var(--easyidp-navy)}

/* Apparition au defilement --------------------------------------------------
   La classe .lv-reveal est posee par le script, pas par le HTML : sans
   JavaScript rien n'est masque, la page s'affiche simplement d'un bloc. Le
   script ne fait rien du tout sous prefers-reduced-motion. */
.landing-next .lv-reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.landing-next .lv-reveal.is-in{opacity:1;transform:none}

/* La barre est collante et fait ~76px : sans marge de defilement, une ancre
   depose le haut de la section sous la barre. */
.landing-next .lv-anchor{scroll-margin-top:92px}
.landing-next{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ .landing-next{scroll-behavior:auto} }

/* Colonne de texte du hero — les titres de la page club font cinq lignes dans
   une colonne a 1fr : elle reprend la main sur la maquette. La proportion est
   posee avec le reste de la grille plus haut ; ici il ne reste que le titre. */
.landing-next .lv-h1{max-width:16ch}

/* Le CTA fantome a ete corrige dans la couche partagee (landing.v2.css) : les
   trois pages en service souffraient du meme effacement sur la bande lime. Rien
   a redire ici. */

/* Pages de fonctionnalite ----------------------------------------------------
   Rangees texte + capture, en alternance. L'alternance vient du nth-child et
   non du PHP : ajouter ou retirer une rangee ne casse pas le rythme.

   Pas de carte autour : ces rangees respirent a meme le fond, sinon la page
   n'est qu'un empilement de cartes de plus et on ne distingue plus la landing
   d'une page de detail. */
/* Les titres des pages de fonctionnalite sont plus longs que ceux des landings
   (« Voyez la progression, pas seulement la derniere note. ») : a 16ch ils
   partaient en quatre lignes. */
.landing-feature .lv-h1{max-width:22ch}
.landing-feature .lv-hero-grid{grid-template-columns:1fr 1fr}

.landing-feature .lv-feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  align-items:center;max-width:1180px;margin-inline:auto;
}
.landing-feature .lv-feature-row:nth-child(even) .lv-feature-text{order:2}
.landing-feature .lv-feature-text .lv-sec-h{margin-bottom:18px}
.landing-feature .lv-feature-list{list-style:none;margin:0;padding:0}
.landing-feature .lv-feature-list li{
  position:relative;padding-left:24px;margin-bottom:12px;
  font-size:15.5px;line-height:1.5;color:var(--muted);
}
.landing-feature .lv-feature-list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:50%;background:var(--easyidp-lime);
}
.landing-feature .lv-feature-shot img,
.landing-feature .lv-feature-shot svg{
  display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--glass-b);box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}

@media (max-width:860px){
  /* Une colonne : le texte passe toujours avant sa capture, quelle que soit la
     parite — on lit l'idee, puis on en voit l'ecran. */
  .landing-feature .lv-feature-row{grid-template-columns:1fr;gap:22px}
  .landing-feature .lv-feature-row:nth-child(even) .lv-feature-text{order:0}
}

/* Le probleme ----------------------------------------------------------------
   Les trois points etaient des pastilles grises, du meme gris que les etiquettes
   des cartes de solution : rien ne disait que c'etait la douleur. Ils prennent
   une icone et la couleur d'alerte, et passent en colonne — on les lit comme
   trois constats, plus comme des mots-cles. */
.landing-next .lv-pains{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.landing-next .lv-pain{
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;border-radius:14px;
  background:rgba(240,120,70,.08);border:1px solid rgba(240,140,90,.28);
  font-size:15.5px;font-weight:600;color:rgba(255,226,210,.94);
}
.landing-next .lv-pain i{
  flex:0 0 34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(240,120,70,.16);color:#f0a06e;font-size:15px;
}
@media (min-width:820px){
  /* Trois de front des qu'il y a la place : cote a cote ils se lisent comme un
     constat unique, pas comme une liste a derouler. */
  .landing-next .lv-pains{grid-template-columns:repeat(3,1fr)}
}

/* Cartes de la landing sans capture -------------------------------------------
   Les captures vivent desormais sur les pages /features. Ici l'icone et le texte
   portent seuls la carte : ils grossissent en consequence, sinon la carte sonne
   creux. */
.landing-next .lv-pillar svg{width:64px;height:64px;margin-bottom:18px}
.landing-next .lv-pillar-t{font-size:19px;margin-bottom:14px}
.landing-next .lv-pillar li{font-size:15px;margin-bottom:10px;padding-left:18px}
.landing-next .lv-pillar li::before{width:7px;height:7px;top:8px}

/* Le titre de carte devient un benefice, pas un intitule de fonctionnalite :
   « Reperer automatiquement quel joueur a besoin de vous » plutot que
   « Analyser la progression ». Il passe au cyan de la marque pour se detacher
   des trois puces qui l'expliquent. */
.landing-next .lv-pillar-t{color:var(--easyidp-cyan);line-height:1.28}

/* Icones livrees ------------------------------------------------------------
   Les pictogrammes du catalogue sont des <svg> inline, ceux du graphiste des
   <img>. Meme taille, meme place : les regles doivent viser les deux, sinon la
   carte se retrouve avec une icone a la taille naturelle du fichier — 240px
   pour un SVG, 600 pour un PNG.

   Ces icones portent deja leur propre fond navy arrondi : pas de cadre en plus. */
.landing-next .lv-pillar img{width:64px;height:64px;display:block;margin-bottom:18px;border-radius:14px}
.landing-next .lv-trust-card img{width:44px;height:44px;display:block;margin:0 auto 10px;border-radius:12px}

/* Replis mobiles ------------------------------------------------------------
   EN FIN DE FICHIER, et c'est tout l'interet : deux sections plus haut
   redeclarent .lv-hero-grid (la colonne de texte du hero, puis les pages de
   fonctionnalite). A specificite egale c'est la derniere regle qui gagne, une
   requete media n'y change rien — le hero restait donc a deux colonnes sur
   telephone et la capture de l'application finissait a 118px de large, coincee
   contre le titre. Tout ce qui replie la page vit ici, apres tout le reste. */
@media (max-width:980px){
  .landing-next .lv-hero-grid,
  .landing-feature .lv-hero-grid{grid-template-columns:1fr;gap:30px}
  .landing-next .lv-hero-app svg{max-width:520px}
}
@media (max-width:860px){
  /* En dessous, .landing-v2 replie deja le hero et met le visuel en premier ;
     une maquette d'ecran de 520px avant le titre repousserait le discours hors
     de vue. Ici elle reste apres. */
  .landing-next .lv-hero-app{order:0}
}