/* =========================================================================
   Tijara — page d'accueil publique
   -------------------------------------------------------------------------
   Feuille AUTONOME : la page d'accueil ne charge pas app.css. Elle n'a besoin
   ni de la nav basse, ni du plateau, ni des exercices, et son premier octet
   compte plus que partout ailleurs — c'est la seule page qu'un visiteur juge
   avant d'avoir décidé de rester.

   Les variables reprennent celles de app.css, qui reste la source de vérité du
   système : toute couleur modifiée là-bas doit l'être ici.

   Règles héritées : couleurs franches et plates (AUCUN dégradé de marque),
   aucun emoji (SVG uniquement), thème clair, mobile d'abord, RTL par
   propriétés logiques.
   ========================================================================= */

:root{
  --paper:#FFFBF2;
  --sand:#F2ECDD;
  --card:#FFFFFF;
  --line:#E7DFCC;
  --line-d:#D6CBB0;

  --ink:#14201D;
  --ink2:#66736D;
  --ink3:#98A29C;

  --green:#0F9B6C;  --green-d:#0A7250;  --green-l:#E4F4EE;
  --teal:#0E4B44;   --teal-d:#093330;
  --gold:#EFA51B;   --gold-d:#C2820A;   --gold-l:#FDF1D9;
  --coral:#E4573D;  --coral-d:#B93F29;  --coral-l:#FCE9E4;
  --blue:#2F6BD8;   --blue-d:#2251AC;   --blue-l:#E5EDFB;
  --violet:#6B4BD6; --violet-d:#5236AE; --violet-l:#ECE7FB;

  --r:16px; --r-s:11px; --r-l:22px;
  --t:.26s cubic-bezier(.2,.75,.3,1);
  --lift:0 3px 0 var(--line-d);

  --gut:18px;          /* marge latérale mobile */
  --wide:1120px;       /* largeur maximale du contenu */
}

/* pastilles de module — mêmes teintes que le plateau du parcours */
.m0{--mc:var(--gold);   --mc-d:var(--gold-d);   --mc-l:var(--gold-l)}
.m1{--mc:var(--blue);   --mc-d:var(--blue-d);   --mc-l:var(--blue-l)}
.m2{--mc:var(--green);  --mc-d:var(--green-d);  --mc-l:var(--green-l)}
.m3{--mc:var(--coral);  --mc-d:var(--coral-d);  --mc-l:var(--coral-l)}
.m4{--mc:var(--violet); --mc-d:var(--violet-d); --mc-l:var(--violet-l)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}

body.lp{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  font-size:16px;font-weight:400;line-height:1.7;
  overflow-x:hidden;
}
[dir="rtl"] body.lp{font-size:17px;line-height:1.9}

h1,h2,h3{font-family:"Baloo Bhaijaan 2","Readex Pro",system-ui,sans-serif;font-weight:800;
  line-height:1.2;letter-spacing:-.01em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,video{max-width:100%;display:block}
a{color:var(--green-d);text-underline-offset:3px}
svg{flex:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--teal);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{inset-inline-start:0}

/* ============================ en-tête ============================ */
.lp-bar{
  position:sticky;top:0;z-index:40;background:rgba(255,251,242,.92);
  border-bottom:2px solid var(--line);backdrop-filter:saturate(140%) blur(10px);
  transition:box-shadow var(--t)
}
.lp-bar.stuck{box-shadow:0 6px 18px -12px rgba(20,32,29,.4)}
.lp-bar-in{
  max-width:var(--wide);margin:0 auto;padding:9px var(--gut);
  display:flex;align-items:center;gap:10px
}
.lp-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--teal);margin-inline-end:auto}
.lp-brand-mark{width:32px;height:32px;border-radius:10px;background:var(--teal);color:#fff;
  display:grid;place-items:center;flex:none}
.lp-brand-txt{font-family:Amiri,serif;font-weight:700;font-size:1.2rem;white-space:nowrap;line-height:1}

.lp-nav{display:none;gap:4px}
.lp-nav a{
  text-decoration:none;color:var(--ink2);font-size:.88rem;font-weight:500;
  padding:7px 11px;border-radius:9px;transition:var(--t);white-space:nowrap
}
.lp-nav a:hover{background:var(--sand);color:var(--teal)}

.lp-discover{flex:none}

.lp-login{display:none;text-decoration:none;color:var(--teal);font-weight:600;font-size:.9rem;
  padding:8px 10px;white-space:nowrap}
.lp-login:hover{text-decoration:underline}

/* ============================ sélecteur de langue ============================
   Les langues s'écrivent en toutes lettres, chacune dans sa propre écriture.
   Un intitulé complet ne tient pas dans une barre de téléphone à trois entrées :
   d'où le repli sur un menu déroulant, qui n'affiche que la langue courante.

   Ces règles sont dupliquées à l'identique dans app.css (parcours). Toute
   retouche ici doit y être reportée — le composant, lui, est partagé. */
.langpick{position:relative;flex:none}
.langpick summary{
  display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;
  background:var(--sand);border-radius:99px;padding:6px 12px;
  font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap;
  transition:var(--t);-webkit-tap-highlight-color:transparent
}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary:hover{background:var(--line)}
.langpick[open] summary{background:var(--teal);color:#fff}
.langpick-caret{transition:transform var(--t)}
.langpick[open] .langpick-caret{transform:rotate(180deg)}
.langpick ul{
  position:absolute;z-index:60;top:calc(100% + 7px);inset-inline-end:0;min-width:168px;
  background:var(--card);border:2px solid var(--line);border-radius:13px;padding:6px;
  box-shadow:0 14px 30px -16px rgba(20,32,29,.45);
  animation:lpin .18s cubic-bezier(.2,.75,.3,1) both
}
.langpick li{display:block}
.langpick ul a{
  display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
  color:var(--ink);font-size:.92rem;font-weight:500;transition:var(--t)
}
.langpick ul a:hover{background:var(--sand)}
.langpick ul a[aria-current]{background:var(--green-l);color:var(--green-d);font-weight:700}

/* Sur fond sombre (pied de page) : mêmes proportions, autres encres. */
.langpick-dark summary{background:rgba(255,255,255,.12);color:#fff}
.langpick-dark summary:hover{background:rgba(255,255,255,.2)}

/* ============================ boutons ============================ */
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--green);color:#fff;border:0;border-radius:13px;padding:13px 22px;
  font-family:"Baloo Bhaijaan 2","Readex Pro",sans-serif;font-weight:700;font-size:1rem;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 0 var(--green-d);
  transition:transform .1s ease,box-shadow .1s ease,background var(--t);
  -webkit-tap-highlight-color:transparent
}
.lp-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--green-d)}
.lp-btn-sm{padding:8px 15px;font-size:.88rem;border-radius:10px;box-shadow:0 3px 0 var(--green-d)}
.lp-btn-lg{padding:15px 26px;font-size:1.05rem}
.lp-btn-gold{background:var(--gold);box-shadow:0 4px 0 var(--gold-d)}
.lp-btn-gold:active{box-shadow:0 0 0 var(--gold-d)}
.lp-btn-ghost{background:var(--card);color:var(--teal);border:2px solid var(--line-d);box-shadow:0 4px 0 var(--line-d)}
.lp-btn-ghost:active{box-shadow:0 0 0 var(--line-d)}
[dir="rtl"] .lp-btn .ico{transform:scaleX(-1)}

/* ============================ ossature des sections ============================ */
.lp-sec{padding:52px 0}
.lp-in{max-width:var(--wide);margin:0 auto;padding:0 var(--gut)}
.lp-narrow{max-width:720px}
.lp-sec-sand{background:var(--sand)}
.lp-sec-dark{background:var(--teal);color:#EAF3F1}
.lp-sec-dark h2{color:#fff}
.lp-sec-dark .lp-kicker{color:#8FBFB6}
.lp-sec-dark .lp-sub,.lp-sec-dark .lp-fine{color:#B9D5D0}

.lp-kicker{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);display:flex;align-items:center;gap:7px;margin-bottom:9px}
[dir="rtl"] .lp-kicker{letter-spacing:0}
.lp-sec h2{color:var(--teal);font-size:1.55rem;max-width:20ch}
.lp-sub{color:var(--ink2);font-size:1rem;line-height:1.7;margin-top:10px;max-width:62ch}
.lp-fine{color:var(--ink3);font-size:.82rem;line-height:1.6;margin-top:14px}
.lp-fine-secure{display:flex;gap:8px;align-items:flex-start}

/* apparition au défilement — masquée UNIQUEMENT si le script tourne */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.seen{animation:lpin .55s cubic-bezier(.2,.75,.3,1) both;animation-delay:var(--d,0s)}
@keyframes lpin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ============================ bandeau haut ============================ */
/* Aplats uniquement — la règle « aucun dégradé » du système tient aussi ici.
   Le relief vient des deux pastilles de couleur franche posées derrière le
   contenu, pas d'un fondu. */
.lp-hero{padding:34px 0 46px;text-align:center;position:relative;overflow:hidden;background:var(--paper)}
.lp-hero::before,.lp-hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0
}
.lp-hero::before{width:340px;height:340px;background:var(--gold-l);top:-170px;inset-inline-start:-130px}
.lp-hero::after{width:300px;height:300px;background:var(--green-l);top:-90px;inset-inline-end:-140px}
.lp-hero-in{max-width:840px;margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}

.lp-badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:2px solid var(--line);border-radius:99px;padding:6px 15px;
  font-size:.78rem;font-weight:600;color:var(--teal);margin-bottom:20px
}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  animation:lppulse 2.4s ease-in-out infinite}
@keyframes lppulse{50%{transform:scale(1.45);opacity:.55}}

.lp-hero h1{
  font-size:clamp(2rem,7.5vw,3.4rem);color:var(--teal);margin:20px 0 0;letter-spacing:-.02em
}
.lp-hero h1 em{display:block;font-style:normal;color:var(--green-d)}
.lp-lead{color:var(--ink2);font-size:1.05rem;line-height:1.75;margin:16px auto 0;max-width:56ch}

.lp-cta{display:flex;flex-direction:column;gap:11px;margin-top:26px}
.lp-cta .lp-btn{width:100%}
.lp-note{color:var(--ink3);font-size:.82rem;margin-top:14px}

.lp-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:32px;text-align:start
}
.lp-stats li{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-s);
  box-shadow:var(--lift);padding:13px 14px
}
.lp-stats b{
  display:block;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;
  font-size:1.75rem;line-height:1;color:var(--teal)
}
.lp-stats span{display:block;font-weight:600;font-size:.88rem;margin-top:3px}
.lp-stats small{display:block;color:var(--ink3);font-size:.75rem;line-height:1.45;margin-top:2px}

/* ============================ vidéo ============================
   Format vertical 9/16 — celui d'un reel. C'est le format de tournage et celui
   que le public visé regarde tous les jours ; l'imposer en 16/9 laisserait deux
   bandes noires sur toute la hauteur.

   La largeur est plafonnée par la HAUTEUR disponible : une colonne 9/16 laissée
   libre sur un grand écran remplirait deux écrans à elle seule. */
.lp-reel{margin-top:28px}
.lp-video{
  position:relative;margin:0 auto;border-radius:var(--r-l);overflow:hidden;
  border:2px solid var(--line-d);background:var(--teal-d);
  /* La largeur porte les trois contraintes à la fois — largeur du parent,
     plafond absolu, et hauteur d'écran convertie en largeur (42vh ≈ 74vh × 9/16).
     Contraindre la HAUTEUR à la place déformerait le cadre : avec un
     aspect-ratio, c'est la largeur qui commande. */
  aspect-ratio:9/16;width:min(100%,300px,42vh);
  box-shadow:0 22px 50px -30px rgba(20,32,29,.85)
}
.lp-reel-note{text-align:center;max-width:38ch;margin-inline:auto}
.lp-video-facade{
  position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  background:var(--teal-d);color:#fff;font:inherit;-webkit-tap-highlight-color:transparent
}
/* Halo plat derrière le bouton : donne de la profondeur sans dégradé ni image. */
.lp-video-facade::before{
  content:"";position:absolute;width:min(58%,320px);aspect-ratio:1;border-radius:50%;
  background:var(--teal);opacity:.85
}
.lp-video-glow{
  position:absolute;width:190px;height:190px;border-radius:50%;
  border:2px solid rgba(255,255,255,.16);animation:lpring 3.4s ease-out infinite
}
@keyframes lpring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.lp-play{
  position:relative;width:72px;height:72px;border-radius:50%;background:var(--gold);color:var(--teal-d);
  display:grid;place-items:center;box-shadow:0 6px 0 var(--gold-d);transition:transform var(--t)
}
.lp-play svg{margin-inline-start:5px}
[dir="rtl"] .lp-play svg{margin-inline-start:0;margin-inline-end:5px;transform:scaleX(-1)}
.lp-video-facade:hover .lp-play{transform:scale(1.06)}
.lp-video-facade:active .lp-play{transform:translateY(4px) scale(1);box-shadow:0 0 0 var(--gold-d)}
.lp-video-txt{position:relative;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:700;font-size:1.05rem}
.lp-video-meta{position:relative;font-size:.75rem;color:rgba(255,255,255,.6);letter-spacing:.04em}
.lp-video-el{width:100%;height:100%;object-fit:contain;background:#000;display:block}

/* ============================ grille de cartes ============================ */
.lp-grid{display:grid;gap:12px;margin-top:26px}
.lp-card{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);padding:17px 18px;transition:transform var(--t),box-shadow var(--t)
}
.lp-card h3{font-size:1rem;margin:11px 0 4px;color:var(--ink)}
.lp-card p{color:var(--ink2);font-size:.89rem;line-height:1.65}
@media (hover:hover){
  .lp-card:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--line-d)}
}
.lp-tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--green-l);color:var(--green-d)}
.lp-tile-lg{width:56px;height:56px;border-radius:16px;margin:0 auto 14px}
.t-gold{background:var(--gold-l);color:var(--gold-d)}
.t-blue{background:var(--blue-l);color:var(--blue-d)}
.t-green{background:var(--green-l);color:var(--green-d)}
.t-coral{background:var(--coral-l);color:var(--coral-d)}
.t-violet{background:var(--violet-l);color:var(--violet-d)}

/* ============================ méthode : six temps ============================ */
.lp-steps{display:grid;gap:11px;margin-top:26px;counter-reset:step}
.lp-step{
  position:relative;display:flex;gap:14px;align-items:flex-start;
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);padding:16px 17px;padding-inline-start:54px
}
.lp-step-n{
  position:absolute;inset-inline-start:15px;top:16px;
  width:26px;height:26px;border-radius:8px;background:var(--mc,var(--green));color:#fff;
  display:grid;place-items:center;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.82rem;
  box-shadow:0 2px 0 var(--mc-d,var(--green-d))
}
.lp-step-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--mc-l,var(--green-l));color:var(--mc-d,var(--green-d))}
.lp-step h3{font-size:1rem;margin-bottom:3px}
.lp-step p{color:var(--ink2);font-size:.89rem;line-height:1.6}

.lp-split{
  margin-top:14px;background:var(--card);border:2px solid var(--line-d);
  border-radius:var(--r);padding:17px 18px
}
.lp-steps + .lp-split{margin-top:22px}
.lp-split-p{color:var(--ink2);font-size:.92rem;line-height:1.7}
.lp-check{display:grid;gap:11px}
.lp-check li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;line-height:1.6}
.lp-check li .ico{margin-top:4px}
.lp-check .ok{color:var(--green-d)}
.lp-check .no{color:var(--coral-d)}
.lp-check li span{color:var(--ink)}

/* ============================ onglets de démonstration ============================ */
/* `position:relative` n'est pas décoratif : sans ancêtre positionné, les
   boutons radio masqués se placeraient par rapport à la page et le focus
   clavier ferait sauter le défilement. */
.lp-tabs{margin-top:24px;position:relative}
.lp-tab-in{position:absolute;top:0;inset-inline-start:0;opacity:0;width:0;height:0;pointer-events:none}
.lp-tabbar{
  display:flex;gap:4px;background:var(--sand);border-radius:99px;padding:4px;
  overflow-x:auto;scrollbar-width:none
}
.lp-sec-sand .lp-tabbar{background:var(--card)}
.lp-tabbar::-webkit-scrollbar{display:none}
.lp-tabbar label{
  flex:1;text-align:center;white-space:nowrap;padding:9px 16px;border-radius:99px;
  font-weight:600;font-size:.88rem;color:var(--ink2);cursor:pointer;transition:var(--t)
}
.lp-tabbar label:hover{color:var(--teal)}
.lp-panels{margin-top:16px}
.lp-panel{display:none}
#lp-demo-1:checked ~ .lp-tabbar label:nth-of-type(1),
#lp-demo-2:checked ~ .lp-tabbar label:nth-of-type(2),
#lp-demo-3:checked ~ .lp-tabbar label:nth-of-type(3){background:var(--teal);color:#fff}
#lp-demo-1:checked ~ .lp-panels .lp-panel:nth-of-type(1),
#lp-demo-2:checked ~ .lp-panels .lp-panel:nth-of-type(2),
#lp-demo-3:checked ~ .lp-panels .lp-panel:nth-of-type(3){display:grid;animation:lpin .35s cubic-bezier(.2,.75,.3,1) both}
.lp-tab-in:focus-visible ~ .lp-tabbar label{outline:none}
#lp-demo-1:focus-visible ~ .lp-tabbar label:nth-of-type(1),
#lp-demo-2:focus-visible ~ .lp-tabbar label:nth-of-type(2),
#lp-demo-3:focus-visible ~ .lp-tabbar label:nth-of-type(3){outline:3px solid var(--gold);outline-offset:2px}

.lp-panel{gap:12px}
.lp-profile{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:15px 16px;
  box-shadow:var(--lift)
}
.lp-profile ul{display:grid;gap:8px}
.lp-profile li{display:flex;gap:9px;align-items:center;font-size:.88rem;color:var(--ink)}
.lp-profile li .ico{color:var(--ink3)}
.lp-output{background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  padding:15px 16px;box-shadow:var(--lift)}
.lp-output .lp-kicker{color:var(--gold-d)}
/* Les paroles à dire au client : le doré ne sert qu'à ça, ici comme dans le parcours. */
.lp-said{
  background:var(--gold-l);border-radius:10px;border-inline-start:3px solid var(--gold);
  padding-block:11px;padding-inline:17px 15px;   /* la place du guillemet suit le sens de lecture */
  margin-bottom:9px;font-size:.95rem;line-height:1.6;position:relative
}
.lp-said::before{content:'“';position:absolute;inset-inline-start:6px;top:2px;
  font-size:1.3rem;line-height:1;color:var(--gold-d);opacity:.4}
[dir="rtl"] .lp-said::before{content:'”'}
.lp-said:last-child{margin-bottom:0}

/* ============================ parcours ============================ */
.lp-path{display:grid;gap:10px;margin-top:26px}
.lp-mod{
  position:relative;display:flex;align-items:center;gap:14px;
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);padding:15px 16px;flex-wrap:wrap
}
.lp-mod::after{
  content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:5px;
  background:var(--mc);border-start-start-radius:var(--r);border-end-start-radius:var(--r)
}
.lp-mod-n{
  width:38px;height:38px;border-radius:11px;background:var(--mc);color:#fff;flex:none;
  display:grid;place-items:center;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;
  box-shadow:0 3px 0 var(--mc-d)
}
.lp-mod-txt{flex:1;min-width:180px}
.lp-mod-txt h3{font-size:1rem;margin-bottom:2px}
.lp-mod-txt p{color:var(--ink2);font-size:.87rem;line-height:1.55}
.lp-mod-count{
  background:var(--mc-l);color:var(--mc-d);border-radius:99px;padding:5px 13px;
  font-size:.79rem;font-weight:700;white-space:nowrap
}

.lp-path-more{margin-top:16px;text-align:center}
.lp-path-more .lp-btn{width:auto}

/* ============================ fenêtre « Découvrir » ============================
   Trois bandes : en-tête figé, liste défilante, pied figé.

   Le point important est que la fenêtre elle-même NE DÉFILE PAS
   (`overflow:hidden`) : seule la liste le fait. Le bouton « Commencer » reste
   donc visible en permanence, quelle que soit la position dans les 58 lignes —
   c'est tout l'intérêt de l'ouvrir dans une fenêtre plutôt qu'en pleine page. */
.lp-modal{
  padding:0;border:0;background:transparent;overflow:hidden;
  width:min(100% - 24px,620px);max-height:min(88dvh,760px);
  margin:auto;color:var(--ink)
}
.lp-modal::backdrop{background:rgba(9,51,48,.55);backdrop-filter:blur(3px)}
.lp-modal[open]{animation:lpmodal .28s cubic-bezier(.2,.75,.3,1) both}
@keyframes lpmodal{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.lp-modal-box{
  display:flex;flex-direction:column;max-height:min(88dvh,760px);overflow:hidden;
  background:var(--paper);border:2px solid var(--line-d);border-radius:var(--r-l);
  box-shadow:0 26px 60px -28px rgba(9,51,48,.7)
}

.lp-modal-head{
  flex:none;display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px 15px;background:var(--card);border-bottom:2px solid var(--line)
}
.lp-modal-head h2{color:var(--teal);font-size:1.2rem}
.lp-modal-head p{color:var(--ink2);font-size:.85rem;margin-top:3px}
.lp-modal-x{
  flex:none;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  border:2px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink2);
  transition:var(--t);margin-inline-start:auto
}
.lp-modal-x:hover{background:var(--sand);color:var(--ink)}

/* La seule zone qui défile. `overscroll-behavior` empêche la page du dessous
   de repartir quand on arrive en bout de liste sur un téléphone. */
.lp-modal-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:16px 20px 20px
}
.lp-modal-body:focus-visible{outline:none}

.lp-modal-foot{
  flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px max(14px,env(safe-area-inset-bottom));
  background:var(--card);border-top:2px solid var(--line)
}
.lp-modal-foot p{flex:1;min-width:170px;color:var(--ink2);font-size:.8rem;line-height:1.5}
.lp-modal-foot .lp-btn{flex:none}

/* --- le sommaire, verrouillé --- */
.lp-out + .lp-out{margin-top:20px}
.lp-out h3{
  display:flex;align-items:center;gap:11px;font-size:1rem;color:var(--ink);
  padding-bottom:9px;border-bottom:2px solid var(--line);margin-bottom:10px
}
.lp-out-n{
  width:30px;height:30px;border-radius:9px;background:var(--mc);color:#fff;flex:none;
  display:grid;place-items:center;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.85rem
}
.lp-out h3 small{
  display:block;font-family:"Readex Pro",sans-serif;font-weight:500;
  font-size:.74rem;color:var(--ink3)
}
.lp-out-list{display:grid;gap:5px}
/* Grisé, mais lisible : le visiteur doit pouvoir lire les 58 intitulés — c'est
   ce qu'il achète. Verrouillé ne veut pas dire illisible. */
.lp-out-list li{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  background:var(--sand);color:var(--ink2);font-size:.89rem;line-height:1.45
}
.lp-out-i{
  flex:none;min-width:24px;text-align:center;font-family:"Baloo Bhaijaan 2",sans-serif;
  font-weight:800;font-size:.75rem;color:var(--ink3)
}
.lp-out-t{flex:1;min-width:0}
.lp-out-lock{flex:none;color:var(--ink3);display:grid;place-items:center}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================ score ============================ */
.lp-two{display:grid;gap:26px}
.lp-quote{
  display:flex;gap:11px;align-items:flex-start;margin-top:18px;
  background:var(--gold-l);border-inline-start:3px solid var(--gold);border-radius:10px;
  padding:12px 15px;font-size:.9rem;line-height:1.6;color:var(--ink)
}
.lp-quote .ico{color:var(--gold-d);margin-top:3px}
.lp-scorecard{padding:19px 20px}
.lp-scorecard figcaption{margin-bottom:14px}
.lp-bar{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin-bottom:15px}
.lp-bar-lbl{font-size:.85rem;font-weight:500}
.lp-bar-delta{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.8rem;
  color:var(--green-d);background:var(--green-l);border-radius:7px;padding:1px 8px;align-self:start
}
.lp-bar-tracks{grid-column:1/-1;display:grid;gap:4px}
.lp-bar-tracks i{display:block;height:9px;border-radius:99px;background:var(--sand);position:relative}
.lp-bar-tracks i::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px;
  width:var(--w);transition:width 1.1s cubic-bezier(.2,.75,.3,1)
}
.js .reveal .lp-bar-tracks i::after{width:0}
.js .reveal.seen .lp-bar-tracks i::after{width:var(--w)}
.lp-bar-tracks .s0::after{background:var(--line-d)}
.lp-bar-tracks .s1::after{background:var(--blue)}
.lp-bar-tracks .s2::after{background:var(--green)}
.lp-legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:4px;font-size:.78rem;color:var(--ink2)}
.lp-legend li{display:flex;align-items:center;gap:7px}
.lp-legend i{width:12px;height:12px;border-radius:4px;display:block}
.lp-legend .s0{background:var(--line-d)}
.lp-legend .s1{background:var(--blue)}
.lp-legend .s2{background:var(--green)}

/* ============================ tarif ============================ */
.lp-price{
  position:relative;margin-top:24px;background:var(--card);border:2px solid var(--line-d);
  border-radius:var(--r-l);box-shadow:0 4px 0 var(--line-d);padding:26px 22px;text-align:center
}
/* Pastille de remise, posée sur le coin de la carte. */
.lp-price-off{
  position:absolute;top:-13px;inset-inline-end:18px;
  background:var(--coral);color:#fff;border-radius:99px;padding:5px 14px;
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.9rem;
  box-shadow:0 3px 0 var(--coral-d)
}
.lp-price-kick{font-size:.82rem;font-weight:600;color:var(--ink2)}
.lp-price-was{font-size:.85rem;color:var(--ink3);margin-top:4px}
.lp-price-was s{color:var(--ink2);text-decoration-color:var(--coral);text-decoration-thickness:2px}
.lp-price-amount{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:3rem;line-height:1.1;
  color:var(--teal);margin:2px 0 0
}
.lp-price-amount span{font-size:1.1rem;color:var(--ink2)}
.lp-price-free{font-size:2.1rem;color:var(--green-d)}
.lp-price-sub{color:var(--ink2);font-size:.92rem;margin-top:6px}
/* Le montant réellement débité. Discret par la taille, jamais par l'absence. */
.lp-price-charged{font-size:.8rem;color:var(--ink3);margin-top:8px}
.lp-price-list{display:grid;gap:10px;text-align:start;margin:20px 0;
  border-block:2px solid var(--line);padding:18px 0}
.lp-price-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.55}
.lp-price-list .ico{color:var(--green);margin-top:3px}
.lp-price .lp-btn{width:100%}
.lp-price .lp-fine{text-align:start}

/* ============================ questions ============================ */
.lp-faq{margin-top:22px;display:grid;gap:9px}
.lp-faq details{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);overflow:hidden
}
.lp-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 17px;cursor:pointer;font-weight:600;font-size:.97rem;color:var(--teal);
  list-style:none;-webkit-tap-highlight-color:transparent
}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary:hover{background:var(--paper)}
.lp-faq-sign{position:relative;width:18px;height:18px;flex:none}
.lp-faq-sign::before,.lp-faq-sign::after{
  content:"";position:absolute;inset-inline-start:0;top:8px;width:18px;height:2.5px;
  border-radius:2px;background:var(--ink3);transition:transform var(--t)
}
.lp-faq-sign::after{transform:rotate(90deg)}
.lp-faq details[open] .lp-faq-sign::after{transform:rotate(0)}
.lp-faq details[open] summary{color:var(--green-d)}
.lp-faq details p{padding:0 17px 17px;color:var(--ink2);font-size:.92rem;line-height:1.72}
.lp-faq details[open] p{animation:lpin .3s cubic-bezier(.2,.75,.3,1) both}

/* ============================ appel final ============================ */
.lp-final{background:var(--teal);color:#EAF3F1;text-align:center;padding:56px 0 60px}
.lp-final h2{color:#fff;font-size:1.75rem;margin:16px auto 0;max-width:18ch}
.lp-final .lp-sub{color:#B9D5D0;margin-inline:auto}
.lp-final .lp-note{color:#8FBFB6}
.lp-cta-center{align-items:center}
.lp-final .lp-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32);
  box-shadow:0 4px 0 rgba(255,255,255,.18)}

/* ============================ pied de page ============================ */
.lp-foot{background:var(--teal-d);color:#A9C8C3;padding:40px 0 90px}
.lp-foot-in{max-width:var(--wide);margin:0 auto;padding:0 var(--gut);display:grid;gap:26px}
.lp-foot-brand .lp-brand-txt{color:#fff;font-size:1.3rem;display:block;margin-bottom:8px}
.lp-foot-brand p{font-size:.87rem;line-height:1.65;max-width:38ch}
.lp-foot-col h2{color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:11px}
[dir="rtl"] .lp-foot-col h2{letter-spacing:0}
.lp-foot-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.lp-foot-col a{color:#A9C8C3;text-decoration:none;font-size:.9rem;transition:var(--t)}
.lp-foot-col a:hover{color:#fff;text-decoration:underline}
.lp-foot-col a[aria-current]{color:#fff;font-weight:600}
.lp-social{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.lp-copy{text-align:center;color:#6E918C;font-size:.78rem;margin-top:32px;padding:0 var(--gut)}

/* ============================ barre d'action collée ============================ */
.lp-dock{
  position:fixed;inset-inline:0;bottom:0;z-index:45;display:flex;align-items:center;gap:12px;
  background:var(--card);border-top:2px solid var(--line);
  padding:10px var(--gut) max(10px,env(safe-area-inset-bottom));
  box-shadow:0 -8px 22px -18px rgba(20,32,29,.6);
  animation:lpdock .3s cubic-bezier(.2,.75,.3,1) both
}
.lp-dock[hidden]{display:none}
@keyframes lpdock{from{transform:translateY(100%)}to{transform:none}}
.lp-dock-price{display:flex;flex-direction:column;line-height:1.2;margin-inline-end:auto}
.lp-dock-price b{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:1.05rem;color:var(--teal)}
.lp-dock-price b s{font-weight:600;font-size:.82rem;color:var(--ink3);
  text-decoration-color:var(--coral);margin-inline-start:5px}
.lp-dock-price small{font-size:.72rem;color:var(--ink3)}
.lp-dock .lp-btn{flex:none}

/* ============================ très petits écrans ============================
   En dessous de 430 px, l'en-tête doit faire tenir la marque, le sélecteur de
   langue et le bouton d'inscription. C'est le bouton qui doit survivre : le
   nom de la marque est déjà partout ailleurs sur la page. */
@media (max-width:430px){
  :root{--gut:15px}
  .lp-bar-in{gap:7px}
  /* Le nom rétrécit mais reste : le masquer laisserait un lien vide, puisque
     la marque n'a plus de pictogramme. */
  .lp-brand-txt{font-size:1.02rem}
  .lp-btn-sm{padding:8px 11px;font-size:.82rem}
  /* Le sélecteur de langue garde le mot entier, mais perd son globe : c'est
     l'intitulé qui informe, pas l'icône. */
  .langpick summary{padding:6px 10px;font-size:.78rem;gap:5px}
  .langpick summary > svg:first-child{display:none}
  .lp-hero{padding-top:26px}
  .lp-play{width:62px;height:62px}
  .lp-modal-head,.lp-modal-body,.lp-modal-foot{padding-inline:15px}
  .lp-price-amount{font-size:2.5rem}
  .lp-dock{gap:9px}
  .lp-dock-price b{font-size:.95rem}
}

/* Sous la tablette, l'en-tête porte trois éléments : la marque, « Découvrir »
   et la langue. Le bouton d'inscription en sort — la barre basse le reprend dès
   qu'on quitte le bandeau haut, et tant qu'on y est, le gros bouton du bandeau
   est à l'écran. Quatre éléments dans 360 px, c'est un débordement garanti. */
@media (max-width:639px){
  .lp-bar-in > .lp-btn-sm:not(.lp-discover){display:none}
}

/* ============================ tablette ============================ */
@media (min-width:640px){
  :root{--gut:24px}
  .lp-sec{padding:66px 0}
  .lp-sec h2{font-size:1.95rem}
  .lp-cta{flex-direction:row;justify-content:center}
  .lp-cta .lp-btn{width:auto}
  .lp-stats{grid-template-columns:repeat(4,1fr)}
  .lp-grid-3{grid-template-columns:repeat(2,1fr)}
  .lp-steps{grid-template-columns:repeat(2,1fr)}
  .lp-panel{grid-template-columns:270px 1fr;align-items:start}
  .lp-price{padding:34px 32px}
  .lp-price .lp-btn{width:auto;min-width:280px}
  .lp-foot-in{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .lp-final h2{font-size:2.2rem}
}

/* ============================ ordinateur ============================ */
@media (min-width:960px){
  html{scroll-padding-top:84px}
  .lp-nav{display:flex}
  .lp-login{display:inline-flex}
  .lp-hero{padding:64px 0 74px}
  .lp-sec{padding:84px 0}
  .lp-sec h2{font-size:2.2rem}
  .lp-grid-3{grid-template-columns:repeat(3,1fr)}
  .lp-steps{grid-template-columns:repeat(3,1fr)}
  .lp-two{grid-template-columns:1fr 1fr;align-items:center;gap:44px}
  .lp-video{margin-top:32px}
  /* Au-delà du téléphone, le bouton d'en-tête suffit : la barre basse
     mangerait de l'écran sans rien apporter. */
  .lp-dock{display:none!important}
  .lp-foot{padding-bottom:44px}
}

/* ============================ accessibilité ============================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .reveal .lp-bar-tracks i::after{width:var(--w)}
}
@media (forced-colors:active){
  .lp-btn,.lp-card,.lp-price,.lp-faq details{border:1px solid CanvasText}
}