/* ========================================================================= Tijara — page d'accueil publique ------------------------------------------------------------------------- Feuille AUTONOME : la page d'accueil ne charge pas app.css. Son premier octet compte plus que partout ailleurs — c'est la seule page qu'un visiteur juge avant d'avoir décidé de rester, et l'essentiel du trafic vient d'Instagram, sur un téléphone, sur un réseau moyen. Parti pris visuel : blanc dominant, encre presque noire, un seul accent doré repris de l'identité. Pas de dégradé de marque, pas d'emoji, pas d'ombre marquée. Ce qui doit se voir, c'est le texte. Mobile d'abord. RTL par propriétés logiques — l'arabe est la langue principale de cette page, pas une variante. PAS d'overflow-x:hidden sur : il force overflow-y à `auto`, le corps devient son propre conteneur de défilement, et l'apparition au défilement ne se déclenche plus. Le débordement se coupe là où il naît. ========================================================================= */ :root{ --paper:#FFFFFF; --soft:#FAFAF8; /* fond des sections alternées — un souffle, pas une couleur */ --card:#FFFFFF; --line:#EAEAE6; --line-d:#DCDCD6; --ink:#1E1E1E; --ink2:#656565; --ink3:#8E8E8E; /* Accent unique, repris du logotype. */ --gold:#BD8524; --gold-d:#96681A; --gold-l:#FBF5E9; --green:#12855F; --red:#C0392B; --r:14px; --r-s:10px; --r-l:20px; --t:.22s cubic-bezier(.2,.75,.3,1); --gut:20px; --wide:1080px; --narrow:720px; } /* Pastilles de module — un seul accent, quatre intensités. Cinq couleurs franches feraient de la grille des modules un arc-en-ciel, ce qui est exactement l'inverse de « premium et sobre ». */ .m1{--mc:#BD8524} .m2{--mc:#A8761F} .m3{--mc:#8E641A} .m4{--mc:#745215} *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px} body.lp{ margin:0;background:var(--paper);color:var(--ink); font-family:"Readex Pro","IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif; font-size:16px;font-weight:400;line-height:1.7; -webkit-font-smoothing:antialiased; } /* L'arabe a besoin d'un peu plus d'air : les diacritiques et les hampes se chevauchent à l'interligne latin. */ [dir="rtl"] body.lp{font-size:17px;line-height:1.95} h1,h2,h3{font-family:"Baloo Bhaijaan 2","Readex Pro",system-ui,sans-serif; font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0;color:var(--ink)} [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0;line-height:1.5} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} img,video{max-width:100%;height:auto;display:block} a{color:inherit} :focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:4px} .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} .skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--ink); color:#fff;padding:12px 18px;border-radius:0 0 var(--r-s) 0;font-weight:600} .skip:focus{inset-inline-start:0} /* ============================== ossature ============================== */ .lp-in{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut)} .lp-narrow{max-width:var(--narrow)} .lp-center{text-align:center} .lp-sec{padding-block:56px} .lp-sec-alt{background:var(--soft);border-block:1px solid var(--line)} .lp-head{max-width:640px;margin-bottom:28px} .lp-head h2{font-size:1.65rem} .lp-head p{color:var(--ink2);margin-top:10px;font-size:1.02rem} .lp-prose{max-width:640px;margin-top:26px;color:var(--ink2)} .lp-prose p{margin-bottom:12px} .lp-prose p:last-child{margin-bottom:0} .lp-prose-strong{color:var(--ink);font-weight:500} .lp-note{ margin-top:20px;font-size:.88rem;color:var(--ink3);line-height:1.65; border-inline-start:3px solid var(--line-d);padding-inline-start:14px } .lp-center.lp-note{border:0;padding:0} /* ============================== en-tête ============================== */ .lp-bar{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid transparent;transition:border-color var(--t) } .lp-bar.stuck{border-bottom-color:var(--line)} .lp-bar-in{ max-width:var(--wide);margin-inline:auto;padding:10px var(--gut); display:flex;align-items:center;gap:12px } /* flex:none — la marque ne se laisse JAMAIS comprimer. Sans ça, quand la barre manque de place, le drapeau logique rétrécit la marque sous sa largeur réelle et le nom arabe (white-space:nowrap) déborde sur le premier lien du menu. */ .lp-brand{display:flex;align-items:center;gap:9px;text-decoration:none;margin-inline-end:auto;flex:none} .lp-brand-logo{width:auto;height:34px} .lp-brand-txt{font-family:Amiri,serif;font-weight:700;font-size:1.15rem;white-space:nowrap;line-height:1} .lp-nav{display:none;gap:2px} .lp-nav a{ text-decoration:none;color:var(--ink2);font-size:.9rem;font-weight:500;white-space:nowrap; padding:8px 11px;border-radius:9px;transition:color var(--t),background var(--t) } .lp-nav a:hover{color:var(--ink);background:var(--soft)} .lp-lang{display:none} .lp-login{display:none;white-space:nowrap;text-decoration:none;color:var(--ink2);font-weight:600;font-size:.9rem;padding:8px 6px} .lp-login:hover{color:var(--ink)} /* Sélecteur de langue. La page d'accueil est autonome et ne charge pas app.css : sans ces règles, le

tomberait à l'état brut — marqueur natif « ► » visible, liste sans cadre. On reprend le geste du sélecteur du tableau de bord, habillé de la palette sobre de l'accueil (accent doré, pas de teal). */ .lp-lang.langpick{position:relative;flex:none} .langpick summary{ display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer; background:var(--soft);box-shadow:inset 0 0 0 1px var(--line); border-radius:99px;padding:8px 13px; font-size:.86rem;font-weight:600;color:var(--ink2);white-space:nowrap; transition:color var(--t),background var(--t),box-shadow var(--t); -webkit-tap-highlight-color:transparent } .langpick summary::-webkit-details-marker{display:none} /* WebKit/Blink */ .langpick summary:hover{color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--line-d)} .langpick[open] summary{color:#fff;background:var(--ink);box-shadow:none} .langpick-caret{transition:transform var(--t)} .langpick[open] .langpick-caret{transform:rotate(180deg)} .langpick ul{ position:absolute;z-index:60;top:calc(100% + 8px);inset-inline-end:0;min-width:168px; list-style:none;margin:0;padding:6px; background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 16px 34px -18px rgba(20,20,20,.4) } .langpick ul a{ display:block;padding:9px 12px;border-radius:var(--r-s);text-decoration:none; color:var(--ink);font-size:.92rem;font-weight:500;transition:background var(--t),color var(--t) } .langpick ul a:hover{background:var(--soft)} .langpick ul a[aria-current]{background:var(--gold-l);color:var(--gold-d);font-weight:700} /* ============================== boutons ============================== 48 px de haut au minimum : c'est la cible tactile en dessous de laquelle un pouce rate le bouton une fois sur cinq. */ .lp-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:48px;padding:13px 22px; background:var(--ink);color:#fff;border:0;border-radius:var(--r-s); font:inherit;font-weight:600;font-size:.98rem;text-decoration:none;cursor:pointer; transition:transform var(--t),background var(--t),box-shadow var(--t) } .lp-btn:hover{background:#000} .lp-btn:active{transform:translateY(1px)} .lp-btn-lg{padding:16px 28px;font-size:1.05rem;min-height:54px} .lp-btn-sm{min-height:48px;padding:11px 16px;font-size:.9rem} .lp-btn-ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-d)} .lp-btn-ghost:hover{background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--ink3)} .lp-cta{display:flex;flex-direction:column;gap:11px;margin-top:26px} .lp-cta .lp-btn{width:100%} /* ============================== 1 · la une ============================== */ .lp-hero{padding-block:34px 52px;position:relative;overflow:hidden} .lp-badge{ display:inline-block;background:var(--gold-l);color:var(--gold-d); padding:7px 14px;border-radius:99px;font-size:.84rem;font-weight:600; line-height:1.5;margin-bottom:18px } .lp-hero h1{font-size:1.95rem;max-width:15ch} [dir="rtl"] .lp-hero h1{max-width:20ch} .lp-lead{font-size:1.12rem;color:var(--ink2);margin-top:14px;max-width:36ch;line-height:1.65} .lp-hero-body{margin-top:22px;max-width:44ch;color:var(--ink2);font-size:.98rem} .lp-hero-body p{margin-bottom:10px} /* Les deux phrases opposées : c'est là que se joue l'argument, elles doivent se distinguer du paragraphe sans crier. */ .lp-quote{ font-weight:600;padding:9px 14px;border-radius:var(--r-s); margin-block:4px 12px;display:inline-block } .lp-quote-bad{background:#F6F6F4;color:var(--ink3);text-decoration:line-through;text-decoration-thickness:1.5px} .lp-quote-good{background:var(--gold-l);color:var(--gold-d)} .lp-checks{margin-top:24px;display:grid;gap:9px} .lp-checks li{display:flex;align-items:flex-start;gap:9px;font-size:.93rem;color:var(--ink2)} .lp-checks svg{color:var(--green);flex:none;margin-top:4px} /* ============================== 2 · diagnostic ============================== */ .lp-diag{display:grid;gap:12px} .lp-diag-card{ position:relative;background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:18px 18px 18px 52px; transition:border-color var(--t),transform var(--t),box-shadow var(--t) } [dir="rtl"] .lp-diag-card{padding:18px 52px 18px 18px} .lp-diag-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 20px -12px rgba(0,0,0,.22)} .lp-diag-card p{font-size:1rem;line-height:1.6;color:var(--ink)} .lp-diag-n{ position:absolute;inset-inline-start:18px;top:18px; width:24px;height:24px;border-radius:7px;background:var(--gold-l);color:var(--gold-d); display:grid;place-items:center;font-size:.78rem;font-weight:700 } .lp-diag-after{margin-top:30px;max-width:640px} .lp-diag-after p{color:var(--ink2);margin-bottom:10px} .lp-diag-punch{color:var(--ink);font-size:1.08rem;margin-bottom:22px !important} .lp-diag-punch b{font-weight:700} /* ============================== 3 · la chaîne ============================== */ .lp-chain{display:grid;gap:0;margin-block:8px 6px} .lp-chain-step{ display:flex;align-items:center;gap:14px;padding-block:9px;position:relative } .lp-chain-dot{ width:11px;height:11px;border-radius:50%;background:var(--gold);flex:none; box-shadow:0 0 0 4px var(--gold-l) } /* Le fil qui relie les étapes. Décoratif, donc en CSS : dans le texte, un lecteur d'écran annoncerait « flèche vers le bas » neuf fois. */ .lp-chain-step::before{ content:"";position:absolute;inset-inline-start:5px;top:-50%; width:1.5px;height:100%;background:var(--line-d) } .lp-chain-step:first-child::before{display:none} .lp-chain-txt{font-weight:600;font-size:1rem} /* ============================== 4 · personnalisation ============================== */ .lp-perso{display:grid;gap:14px} .lp-perso-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:22px;transition:border-color var(--t),box-shadow var(--t) } .lp-perso-card:hover{border-color:var(--gold);box-shadow:0 6px 20px -14px rgba(0,0,0,.2)} .lp-perso-card h3{font-size:1.12rem;color:var(--gold-d)} .lp-perso-lead{margin-top:12px;font-weight:600;font-size:.92rem} .lp-perso-card>p:last-child{margin-top:6px;color:var(--ink2);font-size:.95rem} .lp-perso-after{ margin-top:26px;padding:22px;border-radius:var(--r); background:var(--gold-l);border:1px solid #EFE2C8 } .lp-perso-same{font-weight:700;font-size:1.05rem;color:var(--ink)} .lp-perso-diff{margin-top:6px;color:var(--gold-d);font-weight:600} /* ============================== 5 · avant / après ============================== */ .lp-ba{display:grid;gap:16px} .lp-ba-col{border-radius:var(--r);padding:22px;border:1px solid var(--line);background:var(--card)} .lp-ba-col h3{ font-size:.78rem;text-transform:uppercase;letter-spacing:.1em; margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line) } [dir="rtl"] .lp-ba-col h3{letter-spacing:0} .lp-ba-col li{ padding-block:11px;font-size:.95rem;line-height:1.6; border-bottom:1px dashed var(--line) } .lp-ba-col li:last-child{border-bottom:0;padding-bottom:0} .lp-ba-before h3{color:var(--red)} .lp-ba-before li{color:var(--ink2)} .lp-ba-after{border-color:#CFE5DA;background:#FCFEFD} .lp-ba-after h3{color:var(--green);border-bottom-color:#CFE5DA} .lp-ba-after li{color:var(--ink);border-bottom-style:solid;border-bottom-color:#E8F2EE} /* ============================== 6 · les étapes ============================== */ .lp-steps{display:grid;gap:4px} .lp-step{display:flex;gap:16px;padding-block:16px;position:relative} .lp-step-n{ font-family:"Baloo Bhaijaan 2",sans-serif;font-size:.95rem;font-weight:800; color:var(--gold);flex:none;width:30px;padding-top:2px } .lp-step::before{ content:"";position:absolute;inset-inline-start:14px;top:0; width:1.5px;height:100%;background:var(--line) } .lp-step:first-child::before{top:50%;height:50%} .lp-step:last-child::before{height:50%} .lp-step h3{font-size:1.05rem} .lp-step p{color:var(--ink2);font-size:.95rem;margin-top:5px} .lp-video{margin-top:26px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#000} .lp-video video{width:100%;display:block;max-height:70vh} /* ============================== 7 · le score ============================== */ .lp-score{display:grid;gap:20px} .lp-skills{display:grid;grid-template-columns:1fr 1fr;gap:8px} .lp-skills li{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-s); padding:11px 13px;font-size:.88rem;font-weight:500;line-height:1.4 } .lp-score-demo{ margin:0;background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:22px;position:relative } .lp-demo-tag{ display:inline-block;background:var(--soft);color:var(--ink3);border:1px solid var(--line); padding:4px 11px;border-radius:99px;font-size:.72rem;font-weight:600;margin-bottom:16px } .lp-demo-val{display:flex;align-items:baseline;gap:8px} .lp-demo-val b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:3rem;line-height:1;color:var(--gold-d)} .lp-demo-val span{color:var(--ink3);font-size:1rem;font-weight:600} .lp-demo-kv{margin:18px 0 0;display:grid;gap:3px} .lp-demo-kv dt{font-size:.82rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.07em} [dir="rtl"] .lp-demo-kv dt{letter-spacing:0;text-transform:none} .lp-demo-kv dd{margin:0 0 10px;font-weight:600;font-size:.95rem} .lp-score-demo figcaption{ margin-top:6px;font-size:.84rem;color:var(--ink3); padding-top:12px;border-top:1px solid var(--line) } /* ============================== 8 · les modules ============================== */ .lp-mods{display:grid;gap:14px} .lp-mod{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:22px;position:relative; transition:border-color var(--t),box-shadow var(--t) } .lp-mod:hover{border-color:var(--mc,var(--gold));box-shadow:0 6px 20px -14px rgba(0,0,0,.2)} .lp-mod-n{ font-family:"Baloo Bhaijaan 2",sans-serif;font-size:2.4rem;font-weight:800; color:var(--mc,var(--gold));opacity:.16;line-height:1; position:absolute;inset-inline-end:18px;top:14px } .lp-mod h3{font-size:1.1rem;padding-inline-end:44px} .lp-mod-count{ display:inline-block;margin-top:8px;font-size:.75rem;font-weight:700; color:var(--mc,var(--gold));background:var(--gold-l);padding:3px 10px;border-radius:99px } .lp-mod p{margin-top:12px;color:var(--ink2);font-size:.9rem;line-height:1.75} /* ============================== 9 · pour qui ============================== */ .lp-who{display:grid;gap:14px} .lp-who-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:24px;transition:border-color var(--t),box-shadow var(--t) } .lp-who-card:hover{border-color:var(--gold);box-shadow:0 6px 20px -14px rgba(0,0,0,.2)} .lp-who-card h3{font-size:1.15rem} .lp-who-card p{margin-top:10px;color:var(--ink2);font-size:.95rem;line-height:1.8} /* ============================== 10 · pas pour toi ============================== */ .lp-notfor{display:grid;gap:11px} .lp-notfor li{ display:flex;align-items:flex-start;gap:11px; font-size:.97rem;color:var(--ink2);line-height:1.6 } .lp-notfor svg{color:var(--red);flex:none;margin-top:5px;opacity:.75} .lp-notfor-end{ margin-top:26px;padding:20px 22px;border-radius:var(--r); background:var(--gold-l);border:1px solid #EFE2C8; font-weight:600;color:var(--ink);line-height:1.7 } /* ============================== 12 · résultats ============================== */ .lp-empty{ border:1.5px dashed var(--line-d);border-radius:var(--r); padding:30px 24px;text-align:center;background:var(--card) } .lp-empty-tag{ display:inline-block;background:var(--soft);color:var(--ink3); padding:4px 12px;border-radius:99px;font-size:.74rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px } [dir="rtl"] .lp-empty-tag{letter-spacing:0;text-transform:none} .lp-empty p{color:var(--ink2);font-size:.96rem;line-height:1.75;max-width:52ch;margin-inline:auto} /* ============================== 13 · l'offre ============================== */ .lp-price{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-l); overflow:hidden;box-shadow:0 10px 40px -28px rgba(0,0,0,.35) } .lp-price-list{padding:26px 24px} .lp-price-list li{ display:flex;align-items:flex-start;gap:11px; padding-block:9px;font-size:.96rem;line-height:1.55 } .lp-price-list svg{color:var(--green);flex:none;margin-top:4px} .lp-price-box{ background:var(--soft);border-top:1px solid var(--line); padding:26px 24px;text-align:center } .lp-price-was{color:var(--ink3);font-size:.88rem} .lp-price-was s{margin-inline-start:6px} .lp-price-tag{ display:inline-block;margin-top:8px;background:var(--gold);color:#fff; padding:4px 12px;border-radius:99px;font-size:.74rem;font-weight:700 } .lp-price-now{margin-top:8px;display:flex;align-items:baseline;justify-content:center;gap:8px} .lp-price-now b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:3.1rem;line-height:1;color:var(--ink)} .lp-price-now span{font-size:1.1rem;font-weight:600;color:var(--ink2)} .lp-price-once{margin-top:8px;color:var(--ink2);font-size:.92rem} .lp-price-charged{margin-top:4px;color:var(--ink3);font-size:.84rem} .lp-price-box .lp-btn{width:100%;margin-top:20px} .lp-price-secure{margin-top:12px;font-size:.84rem;color:var(--ink3)} .lp-pay-methods{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)} .lp-pay-methods span{font-size:.84rem;color:var(--ink3);display:block;margin-bottom:8px} .lp-pay-methods ul{display:flex;flex-wrap:wrap;gap:7px;justify-content:center} .lp-pay-methods li{ background:var(--card);border:1px solid var(--line);border-radius:8px; padding:6px 11px;font-size:.84rem;font-weight:500;color:var(--ink2) } /* ============================== 14 · questions ============================== */ .lp-faq{border-top:1px solid var(--line)} .lp-faq-item{border-bottom:1px solid var(--line)} .lp-faq-item summary{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px 2px;cursor:pointer;font-weight:600;font-size:1rem; list-style:none;min-height:48px } .lp-faq-item summary::-webkit-details-marker{display:none} .lp-faq-item summary:hover{color:var(--gold-d)} .lp-faq-item summary svg{flex:none;color:var(--ink3);transition:transform var(--t)} .lp-faq-item[open] summary svg{transform:rotate(180deg)} .lp-faq-item p{padding:0 2px 20px;color:var(--ink2);font-size:.96rem;line-height:1.8;max-width:60ch} /* ============================== 15 · clôture ============================== */ .lp-final{padding-block:60px;background:var(--soft);border-top:1px solid var(--line);text-align:center} .lp-final h2{font-size:1.5rem} .lp-final h2 span{color:var(--gold-d)} .lp-final-sub{margin-top:16px;color:var(--ink2);font-size:1.05rem} .lp-final .lp-cta{max-width:420px;margin-inline:auto} /* ============================== pied de page ============================== */ .lp-foot{background:var(--paper);border-top:1px solid var(--line);padding-block:40px 20px} .lp-foot-in{ max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut); display:grid;gap:28px } .lp-foot-logo{height:40px;width:auto} .lp-foot-brand .lp-brand-txt{display:block;margin-top:8px} .lp-foot-brand p{margin-top:8px;color:var(--ink2);font-size:.9rem;max-width:34ch} .lp-foot-col h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:12px} [dir="rtl"] .lp-foot-col h2{letter-spacing:0;text-transform:none} .lp-foot-col a{display:block;padding-block:6px;color:var(--ink2);text-decoration:none;font-size:.92rem} .lp-foot-col a:hover{color:var(--ink)} .lp-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px} .lp-social a{padding:0} .lp-copy{ max-width:var(--wide);margin:28px auto 0;padding:18px var(--gut) 0; border-top:1px solid var(--line);color:var(--ink3);font-size:.84rem;text-align:center } /* ============================== barre basse ============================== Sur téléphone, l'action doit rester à portée de pouce quelle que soit la section lue. Elle n'apparaît qu'une fois la une dépassée : la poser au chargement masquerait le bouton qu'elle duplique. */ .lp-dock{ position:fixed;inset-inline:0;bottom:0;z-index:60; display:flex;align-items:center;gap:12px; padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);backdrop-filter:blur(12px); border-top:1px solid var(--line); transform:translateY(110%);transition:transform var(--t) } .lp-dock.on{transform:none} .lp-dock[hidden]{display:none} /* Le bouton ne passe JAMAIS à la ligne : une barre basse qui double de hauteur mange un cinquième de l'écran et repousse le bouton hors du pouce. C'est le prix qui cède de la place, pas l'action. */ .lp-dock .lp-btn{flex:1;white-space:nowrap;padding-inline:14px} .lp-dock-price{display:flex;flex-direction:column;line-height:1.25;flex:0 1 auto;min-width:0} .lp-dock-price b{white-space:nowrap} .lp-dock-price small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lp-dock-price b{font-size:1.05rem;font-weight:700} .lp-dock-price b s{color:var(--ink3);font-weight:400;font-size:.82rem;margin-inline-start:5px} .lp-dock-price small{color:var(--ink3);font-size:.84rem} /* ============================== fenêtre du programme ============================== */ .lp-modal{ border:0;padding:0;background:transparent;max-width:min(680px,calc(100vw - 28px)); width:100%;max-height:88vh;color:var(--ink) } .lp-modal::backdrop{background:rgba(20,20,20,.5);backdrop-filter:blur(3px)} .lp-modal[open]{animation:lpmodal .24s cubic-bezier(.2,.75,.3,1) both} @keyframes lpmodal{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .lp-modal-box{ display:flex;flex-direction:column;max-height:88vh; background:var(--card);border-radius:var(--r-l);overflow:hidden; box-shadow:0 24px 70px -30px rgba(0,0,0,.5) } .lp-modal-head{ display:flex;align-items:flex-start;gap:14px;padding:20px 22px; border-bottom:1px solid var(--line);flex:none } .lp-modal-head h2{font-size:1.15rem} .lp-modal-head p{color:var(--ink2);font-size:.88rem;margin-top:3px} .lp-modal-head>div{flex:1} .lp-modal-x{ flex:none;width:38px;height:38px;border:0;border-radius:10px;background:var(--soft); color:var(--ink2);display:grid;place-items:center;cursor:pointer;transition:background var(--t) } .lp-modal-x:hover{background:var(--line);color:var(--ink)} .lp-modal-body{flex:1;overflow-y:auto;padding:18px 22px;-webkit-overflow-scrolling:touch} .lp-modal-body:focus-visible{outline:none} .lp-modal-foot{ flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:16px 22px;border-top:1px solid var(--line);background:var(--soft) } .lp-modal-foot p{flex:1;min-width:170px;color:var(--ink3);font-size:.84rem;line-height:1.5} .lp-out{margin-bottom:22px} .lp-out:last-child{margin-bottom:0} .lp-out h3{display:flex;align-items:center;gap:11px;font-size:.98rem;margin-bottom:10px} .lp-out-n{ width:24px;height:24px;border-radius:7px;background:var(--gold-l);color:var(--gold-d); display:grid;place-items:center;font-size:.75rem;font-weight:700;flex:none } .lp-out h3 small{display:block;color:var(--ink3);font-size:.82rem;font-weight:400;margin-top:1px} .lp-out-list li{ display:flex;align-items:center;gap:10px;padding:9px 0; border-bottom:1px solid var(--line);color:var(--ink2);font-size:.92rem } .lp-out-list li:last-child{border-bottom:0} .lp-out-i{color:var(--ink3);font-size:.82rem;min-width:24px;font-variant-numeric:tabular-nums} .lp-out-t{flex:1;line-height:1.45} .lp-out-lock{color:var(--ink3);flex:none;display:flex} /* ============================== apparition ============================== Masqué UNIQUEMENT si le script tourne : sans JavaScript, la page reste entièrement lisible — c'est la seule page du site qu'un visiteur juge avant d'avoir décidé de rester. */ .js .lp-rise{opacity:0;transform:translateY(14px)} .js .lp-rise.seen{opacity:1;transform:none; transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.3,1)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} .js .lp-rise{opacity:1;transform:none} } /* ============================== tablette ============================== */ @media (min-width:640px){ .lp-sec{padding-block:72px} .lp-hero{padding-block:48px 68px} .lp-hero h1{font-size:2.6rem} .lp-head h2{font-size:2rem} .lp-final h2{font-size:2rem} .lp-cta{flex-direction:row;flex-wrap:wrap} .lp-cta .lp-btn{width:auto} .lp-diag{grid-template-columns:1fr 1fr} .lp-perso{grid-template-columns:repeat(3,1fr)} .lp-who{grid-template-columns:repeat(3,1fr)} .lp-mods{grid-template-columns:1fr 1fr} .lp-ba{grid-template-columns:1fr 1fr} .lp-skills{grid-template-columns:repeat(2,1fr)} .lp-foot-in{grid-template-columns:1.6fr 1fr 1fr 1fr} .lp-price-list{padding:32px} .lp-price-box{padding:32px} } /* ============================== ordinateur ============================== */ @media (min-width:960px){ :root{--gut:28px} .lp-sec{padding-block:88px} .lp-hero{padding-block:64px 88px} .lp-hero h1{font-size:3.1rem} .lp-lead{font-size:1.25rem} /* En-tête compact dès 960 px : langue, connexion et action. Le menu de sections, lui, attend d'avoir vraiment la place (voir 1160 px plus bas) — quatre libellés français longs, révélés trop tôt, écrasaient la marque. */ .lp-lang{display:block} .lp-login{display:inline-block} .lp-diag{grid-template-columns:repeat(3,1fr)} .lp-mods{grid-template-columns:repeat(4,1fr)} .lp-score{grid-template-columns:1.15fr 1fr;align-items:start;gap:32px} .lp-skills{grid-template-columns:1fr 1fr} .lp-chain{grid-template-columns:repeat(2,1fr);column-gap:40px} /* En deux colonnes, le fil vertical relierait des étapes qui ne se suivent plus à l'écran : on le retire plutôt que de mentir sur l'ordre. */ .lp-chain-step::before{display:none} /* La barre basse est un objet de téléphone. Sur grand écran, l'en-tête collé porte déjà l'action en permanence. */ .lp-dock{display:none !important} } /* Menu de sections : révélé seulement là où il tient sans comprimer le reste. En dessous de ce seuil, la colonne de l'en-tête (viewport − marges) devient trop étroite pour la marque ET les quatre liens ; on garde alors l'en-tête compact (marque + langue + connexion + action) plutôt que de tout tasser. */ @media (min-width:1040px){ .lp-nav{display:flex} }