/* ========================================================================= Tijara — page d'accueil publique · « minimal gaming » premium ------------------------------------------------------------------------- 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 chaud dominant, encre presque noire, un seul accent doré repris du logo, un vert maîtrisé réservé au progrès et aux états positifs, et des blocs « console » anthracite pour les zones d'action. Le vocabulaire est celui d'une interface de progression (jalons, scores, déblocages) — jamais celui d'un jeu tapageur. La lueur souligne, elle n'éclaire pas ; elle reste discrète pour que le produit demeure sérieux. Mobile d'abord. RTL par propriétés logiques — l'arabe est la langue principale de cette page, pas une variante. Sans JavaScript, la page reste ENTIÈREMENT lisible : rien n'est masqué hors classe `js`, et l'apparition au défilement dégénère en contenu visible. 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{ /* Fonds chauds : blanc cassé premium plutôt que blanc pur — l'alternance des sections se lit alors sans avoir à crier. */ --paper:#FBFAF7; --soft:#F3EFE6; --card:#FFFFFF; --line:#EAE5D9; --line-d:#D9D2C2; --ink:#17140E; --ink2:#5A554B; --ink3:#938B7B; /* Accent unique, repris du logotype, plus une variante vive pour les lueurs. */ --gold:#BD8524; --gold-d:#8C6215; --gold-l:#FAF3E3; --gold-hi:#E7B851; /* Vert : progrès, score, états positifs — et rien d'autre. */ --green:#12855F; --green-d:#0B6547; --green-l:#E6F3EC; --red:#C0392B; /* Panneaux « console » : zones d'action et tableaux de bord. Noir chaud. */ --panel:#161209; --panel-2:#221B10; --panel-3:#2E2616; --panel-line:rgba(255,255,255,.10); --panel-ink:#F6F0E3; --panel-ink2:#B6AC97; /* Lueurs et élévation, mesurées. */ --glow:rgba(190,133,36,.28); --glow-strong:rgba(190,133,36,.42); --sh-1:0 1px 2px rgba(23,20,14,.05),0 8px 20px -12px rgba(23,20,14,.16); --sh-2:0 22px 48px -28px rgba(23,20,14,.36); --sh-glow:0 12px 32px -14px var(--glow-strong); --grad-gold:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-d)); --r:14px; --r-s:10px; --r-l:20px; --r-xl:26px; --t:.22s cubic-bezier(.2,.75,.3,1); --gut:20px; --wide:1080px; --narrow:720px; } /* Pastilles de module — un seul accent, quatre intensités. */ .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;position:relative; } /* Atmosphère : une lueur dorée très basse en haut de page, fixée, presque imperceptible. Elle réchauffe le blanc sans jamais se remarquer comme un dégradé. */ body.lp::before{ content:"";position:fixed;inset:0 0 auto;height:70vh;z-index:-1;pointer-events:none; background: radial-gradient(120% 60% at 82% -8%,rgba(231,184,81,.13),transparent 60%), radial-gradient(90% 50% at 8% 0%,rgba(190,133,36,.07),transparent 55%); } /* L'arabe a besoin d'un peu plus d'air. */ [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.2;letter-spacing:-.015em;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;position:relative} /* Sections alternées : fond plus chaud + une hairline lumineuse en haut, qui marque la transition comme un « nouveau tableau » sans trait dur. */ .lp-sec-alt{background:var(--soft);border-block:1px solid var(--line)} .lp-sec-alt::before{ content:"";position:absolute;inset-inline:0;top:-1px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--glow),transparent) } /* En-tête de section : un petit repère doré au-dessus du titre donne le rythme d'une progression par chapitres, sans un mot de plus. */ .lp-head{max-width:640px;margin-bottom:30px} .lp-head h2{font-size:1.7rem;position:relative;padding-top:16px} .lp-head h2::before{ content:"";position:absolute;top:0;inset-inline-start:0; width:30px;height:4px;border-radius:99px;background:var(--grad-gold); box-shadow:0 0 14px -2px var(--glow-strong) } .lp-head p{color:var(--ink2);margin-top:12px;font-size:1.03rem} .lp-prose{max-width:640px;margin-top:28px;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:600} .lp-note{ margin-top:22px;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(251,250,247,.82); backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t) } .lp-bar.stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(23,20,14,.5)} .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, sinon le nom arabe (nowrap) déborde sur le premier lien du menu quand la barre manque de place. */ .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} /* Le bouton de l'en-tête ne se laisse pas comprimer : overflow:hidden (le reflet) rognerait sinon « Commencer » quand la barre manque de place. */ .lp-bar .lp-btn{flex:none} /* Sur les petits téléphones : le nom arabe de la marque cède la place (le logo reste et porte la marque), et le globe du sélecteur s'efface pour laisser le NOM de la langue tenir à côté de l'action. */ @media (max-width:479px){ .lp-brand-txt{display:none} .lp-lang.langpick summary{padding-inline:11px;gap:5px} .lp-lang.langpick summary>svg:first-child{display:none} } .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(--card);box-shadow:var(--sh-1)} /* Le sélecteur de langue reste accessible SUR TÉLÉPHONE — c'est la seule page où un visiteur peut être tombé sur la mauvaise langue. Le NOM de la langue est toujours affiché (jamais le seul globe) ; sur les petits écrans, c'est le globe qui s'efface pour laisser tenir le nom à côté de l'action. */ .lp-lang{display:block;flex: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. Autonome (pas d'app.css) : sans ces règles le

montrerait son marqueur natif « ► ». Palette sobre de l'accueil. */ .lp-lang.langpick{position:relative;flex:none} .langpick summary{ display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer; background:var(--card);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1); 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} .langpick summary:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-d),var(--sh-1)} .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:var(--sh-2) } .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 minimum : sous cette cible tactile, un pouce rate le bouton une fois sur cinq. Le bouton primaire est un bloc « console » anthracite : un léger reflet en haut, une ombre douce, et au survol une lueur dorée qui monte — la promesse d'entrer dans un système, sans clinquant. Un reflet balayé traverse le bouton au survol (::before). */ .lp-btn{ position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:48px;padding:13px 22px; background:linear-gradient(180deg,#2a2418,var(--panel));color:#fff; border:0;border-radius:var(--r-s); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--sh-1); font:inherit;font-weight:600;font-size:.98rem;text-decoration:none;cursor:pointer; transition:transform var(--t),box-shadow var(--t),background var(--t) } .lp-btn::before{ content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%); background:linear-gradient(100deg,transparent 20%,rgba(231,184,81,.28) 50%,transparent 80%); transition:transform .6s cubic-bezier(.2,.75,.3,1) } .lp-btn:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px var(--glow),var(--sh-glow)} .lp-btn:hover::before{transform:translateX(120%)} [dir="rtl"] .lp-btn:hover::before{transform:translateX(-120%)} [dir="rtl"] .lp-btn::before{transform:translateX(120%)} .lp-btn:active{transform:translateY(0);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)} .lp-btn-lg{padding:17px 30px;font-size:1.06rem;min-height:56px;border-radius:var(--r)} .lp-btn-sm{min-height:48px;padding:11px 16px;font-size:.9rem} /* Bouton secondaire : contour, ancré dans le clair. */ .lp-btn-ghost{ background:var(--card);color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-d),var(--sh-1) } .lp-btn-ghost::before{display:none} .lp-btn-ghost:hover{background:var(--card); box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 1px var(--glow),var(--sh-glow)} .lp-cta{display:flex;flex-direction:column;gap:12px;margin-top:28px} .lp-cta .lp-btn{width:100%} /* ============================== 1 · la une ============================== « Sur le point d'entrer dans un système. » La colonne de texte porte l'argument ; à côté, sur grand écran, un mini tableau de bord (le HUD) montre le chemin de compétences à parcourir — décoratif, honnête (c'est la vraie structure du parcours), et masqué sur téléphone pour rester léger. */ .lp-hero{padding-block:34px 52px;position:relative;overflow:hidden} /* Grille de fond, très pâle, façon interface — cadrée sur la une seulement. */ .lp-hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5; -webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 72%); mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 72%); background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:44px 44px } .lp-hero-grid{display:block} .lp-hero-main{position:relative;z-index:1} /* Étiquette d'état : une pastille avec un point vert qui « respire » — le signal « système actif », discret. */ .lp-badge{ display:inline-flex;align-items:center;gap:9px; background:var(--card);color:var(--gold-d); box-shadow:inset 0 0 0 1px var(--gold-l),var(--sh-1); padding:7px 15px 7px 12px;border-radius:99px;font-size:.82rem;font-weight:700; letter-spacing:.01em;line-height:1.5;margin-bottom:20px } .lp-badge .lp-dot{ width:8px;height:8px;border-radius:50%;background:var(--green);flex:none; box-shadow:0 0 0 0 rgba(18,133,95,.5);animation:lp-pulse 2.4s ease-out infinite } @keyframes lp-pulse{ 0%{box-shadow:0 0 0 0 rgba(18,133,95,.5)} 70%{box-shadow:0 0 0 7px rgba(18,133,95,0)} 100%{box-shadow:0 0 0 0 rgba(18,133,95,0)} } .lp-hero h1{font-size:2rem;max-width:15ch;letter-spacing:-.025em} [dir="rtl"] .lp-hero h1{max-width:20ch} .lp-lead{font-size:1.14rem;color:var(--ink2);margin-top:16px;max-width:36ch;line-height:1.6} .lp-hero-body{margin-top:24px;max-width:44ch;color:var(--ink2);font-size:.98rem} .lp-hero-body p{margin-bottom:10px} /* Les deux phrases opposées : le pivot de l'argument, du flou à la décision. Traitées comme deux états — « avant » barré, « après » doré et net. */ .lp-quote{ font-weight:600;padding:10px 15px;border-radius:var(--r-s); margin-block:6px 12px;display:inline-flex;align-items:center;gap:9px;line-height:1.45 } .lp-quote::before{ content:"";width:7px;height:7px;border-radius:50%;flex:none } .lp-quote-bad{background:#F1EEE8;color:var(--ink3);text-decoration:line-through;text-decoration-thickness:1.5px} .lp-quote-bad::before{background:var(--ink3)} .lp-quote-good{background:var(--gold-l);color:var(--gold-d);box-shadow:inset 0 0 0 1px #EFE2C4} .lp-quote-good::before{background:var(--gold);box-shadow:0 0 10px -1px var(--glow-strong)} /* Points clés : traités comme des « acquis » — pastille verte cochée. */ .lp-checks{margin-top:26px;display:grid;gap:10px} .lp-checks li{ display:flex;align-items:flex-start;gap:11px;font-size:.94rem;color:var(--ink);font-weight:500 } .lp-checks svg{ color:#fff;background:var(--green);border-radius:6px;padding:3px;flex:none;margin-top:1px; box-shadow:0 2px 8px -3px rgba(18,133,95,.7) } /* Le HUD : carte « tableau de bord » sur grand écran. */ .lp-hud{display:none} /* ============================== 2 · diagnostic ============================== Six situations vécues. Cartes « entrées de journal » : chiffre-jalon en pastille, filet d'accent qui s'allume au survol. */ .lp-diag{display:grid;gap:12px} .lp-diag-card{ position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:19px 19px 19px 54px; box-shadow:var(--sh-1); transition:border-color var(--t),transform var(--t),box-shadow var(--t) } [dir="rtl"] .lp-diag-card{padding:19px 54px 19px 19px} /* filet vertical d'accent, révélé au survol */ .lp-diag-card::before{ content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px; background:var(--grad-gold);opacity:0;transition:opacity var(--t) } .lp-diag-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh-glow)} .lp-diag-card:hover::before{opacity:1} .lp-diag-card p{font-size:1rem;line-height:1.6;color:var(--ink)} .lp-diag-n{ position:absolute;inset-inline-start:16px;top:17px; width:28px;height:28px;border-radius:9px; background:var(--gold-l);color:var(--gold-d);border:1px solid #EFE2C4; display:grid;place-items:center;font-family:"Baloo Bhaijaan 2",sans-serif;font-size:.82rem;font-weight:800 } .lp-diag-after{margin-top:34px;max-width:640px} .lp-diag-after p{color:var(--ink2);margin-bottom:10px} .lp-diag-punch{color:var(--ink);font-size:1.1rem;margin-bottom:24px !important} .lp-diag-punch b{font-weight:800;color:var(--gold-d)} /* ============================== 3 · la chaîne ============================== Un « flux de mission » : jalons reliés par un fil qui s'éteint en dégradé. */ .lp-chain{display:grid;gap:0;margin-block:8px 6px} .lp-chain-step{display:flex;align-items:center;gap:15px;padding-block:10px;position:relative} .lp-chain-dot{ width:13px;height:13px;border-radius:50%;background:var(--gold);flex:none; box-shadow:0 0 0 4px var(--gold-l),0 0 12px -1px var(--glow-strong) } .lp-chain-step::before{ content:"";position:absolute;inset-inline-start:6px;top:-50%; width:2px;height:100%;background:linear-gradient(var(--gold),var(--line-d)) } .lp-chain-step:first-child::before{display:none} .lp-chain-txt{font-weight:600;font-size:1rem} /* ============================== 4 · personnalisation ============================== Chaque type de commerce est un « mode ». Cartes distinctes, bandeau doré en tête, titre-métier mis en avant. */ .lp-perso{display:grid;gap:14px} .lp-perso-card{ position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:24px 22px;box-shadow:var(--sh-1); transition:border-color var(--t),transform var(--t),box-shadow var(--t) } .lp-perso-card::before{ content:"";position:absolute;inset-inline:0;top:0;height:3px; background:var(--grad-gold);opacity:.85 } .lp-perso-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh-glow)} .lp-perso-card h3{font-size:1.12rem;color:var(--gold-d)} .lp-perso-lead{margin-top:12px;font-weight:700;font-size:.94rem;color:var(--ink)} .lp-perso-card>p:last-child{margin-top:7px;color:var(--ink2);font-size:.95rem} .lp-perso-after{ margin-top:28px;padding:24px;border-radius:var(--r); background:linear-gradient(135deg,var(--gold-l),#FFFDF8); border:1px solid #EFE2C4;box-shadow:var(--sh-1) } .lp-perso-same{font-weight:800;font-size:1.06rem;color:var(--ink)} .lp-perso-diff{margin-top:6px;color:var(--gold-d);font-weight:700} /* ============================== 5 · avant / après ============================== Le contraste doit se voir d'un coup d'œil : « où je suis » terne, « où je veux aller » élevé, vert, légèrement en lévitation. */ .lp-ba{display:grid;gap:16px;position:relative} .lp-ba-col{ position:relative;border-radius:var(--r);padding:24px 22px; border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-1) } .lp-ba-col h3{ font-size:.78rem;text-transform:uppercase;letter-spacing:.12em; margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--line); display:flex;align-items:center;gap:9px } [dir="rtl"] .lp-ba-col h3{letter-spacing:0} /* pastille d'état devant le titre de colonne */ .lp-ba-col h3::before{ content:"";width:20px;height:20px;border-radius:6px;flex:none; display:inline-block;background-repeat:no-repeat;background-position:center;background-size:13px } .lp-ba-col li{ padding-block:12px;font-size:.95rem;line-height:1.6; border-bottom:1px dashed var(--line);display:flex;gap:10px;align-items:flex-start } .lp-ba-col li::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;margin-top:9px} .lp-ba-col li:last-child{border-bottom:0;padding-bottom:0} .lp-ba-before h3{color:var(--red)} .lp-ba-before h3::before{background:#FBECEA;box-shadow:inset 0 0 0 1px #F1D6D2} .lp-ba-before li{color:var(--ink2)} .lp-ba-before li::before{background:#D8B4AE} .lp-ba-after{ border-color:#BFE0D2;background:linear-gradient(180deg,#FBFEFC,#F3FAF6); box-shadow:0 22px 48px -30px rgba(18,133,95,.4) } .lp-ba-after h3{color:var(--green-d);border-bottom-color:#CFE9DE} .lp-ba-after h3::before{background:var(--green);box-shadow:0 3px 10px -3px rgba(18,133,95,.8)} .lp-ba-after li{color:var(--ink);border-bottom-style:solid;border-bottom-color:#E4F1EB} .lp-ba-after li::before{background:var(--green)} /* ============================== 6 · les étapes ============================== Cinq « étapes de mission » : numéro en badge doré, rail continu qui les relie. */ .lp-steps{display:grid;gap:4px} .lp-step{display:flex;gap:18px;padding-block:16px;position:relative} .lp-step-n{ font-family:"Baloo Bhaijaan 2",sans-serif;font-size:.85rem;font-weight:800; color:var(--gold-d);flex:none;width:34px;height:34px;border-radius:10px; background:var(--gold-l);border:1px solid #EFE2C4;display:grid;place-items:center; z-index:1;box-shadow:var(--sh-1) } .lp-step::before{ content:"";position:absolute;inset-inline-start:16px;top:0; width:2px;height:100%;background:linear-gradient(var(--line-d),var(--line)) } .lp-step:first-child::before{top:50%;height:50%} .lp-step:last-child::before{height:50%} .lp-step h3{font-size:1.06rem} .lp-step p{color:var(--ink2);font-size:.95rem;margin-top:5px} .lp-video{margin-top:28px;border-radius:var(--r);overflow:hidden; border:1px solid var(--line);background:#000;box-shadow:var(--sh-2)} .lp-video video{width:100%;display:block;max-height:70vh} /* ============================== 7 · le score ============================== Le point fort visuel : un vrai « tableau de bord de performance ». Panneau anthracite, anneau de score doré, forces en vert / faiblesses en ambre. Le score est un EXEMPLE D'INTERFACE, étiqueté comme tel — jamais présenté comme le résultat de quelqu'un. */ .lp-score{display:grid;gap:22px} /* Compétences : grille de « nœuds » à cocher. */ .lp-skills{display:grid;grid-template-columns:1fr 1fr;gap:8px} .lp-skills li{ position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s); padding:12px 13px 12px 34px;font-size:.88rem;font-weight:600;line-height:1.35;color:var(--ink); box-shadow:var(--sh-1);transition:border-color var(--t),transform var(--t) } [dir="rtl"] .lp-skills li{padding:12px 34px 12px 13px} .lp-skills li::before{ content:"";position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%); width:14px;height:14px;border-radius:5px;background:var(--gold-l); box-shadow:inset 0 0 0 1px #EFE2C4 } .lp-skills li:hover{border-color:var(--gold);transform:translateY(-2px)} .lp-score-demo{ margin:0;color:var(--panel-ink); background:radial-gradient(120% 120% at 100% 0,var(--panel-2),var(--panel)); border:1px solid var(--panel-line);border-radius:var(--r-l);padding:24px;position:relative; overflow:hidden;box-shadow:var(--sh-2) } .lp-score-demo::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 60% at 20% 0,rgba(231,184,81,.16),transparent 60%) } .lp-demo-tag{ position:relative;display:inline-flex;align-items:center;gap:7px; background:rgba(255,255,255,.06);color:var(--panel-ink2);border:1px solid var(--panel-line); padding:5px 12px;border-radius:99px;font-size:.72rem;font-weight:700; letter-spacing:.04em;margin-bottom:18px } [dir="rtl"] .lp-demo-tag{letter-spacing:0} .lp-demo-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-hi); box-shadow:0 0 8px 0 var(--gold-hi)} .lp-demo-top{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap} /* Anneau de score. Le remplissage s'anime quand la carte entre à l'écran (classe .seen posée par le script) ; sans script, il s'affiche rempli. */ .lp-ring{position:relative;width:118px;height:118px;flex:none} .lp-ring svg{width:100%;height:100%;transform:rotate(-90deg)} [dir="rtl"] .lp-ring svg{transform:rotate(-90deg) scaleY(-1)} .lp-ring circle{fill:none;stroke-width:9;stroke-linecap:round} .lp-ring-bg{stroke:rgba(255,255,255,.10)} /* Sans JS : rempli d'emblée (comme le nombre affiche 62). Avec JS : vide au départ, puis se remplit quand la carte entre à l'écran (.seen). */ .lp-ring-fill{ stroke:url(#lpring);stroke-dasharray:327;stroke-dashoffset:124; filter:drop-shadow(0 0 5px var(--glow-strong)) } .js .lp-ring-fill{stroke-dashoffset:327} .lp-score-demo.seen .lp-ring-fill{ stroke-dashoffset:124;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.75,.3,1) .1s } .lp-ring-c{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1 } .lp-ring-c b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:2.5rem;color:#fff} .lp-ring-c span{color:var(--panel-ink2);font-size:.82rem;font-weight:700;margin-top:2px} .lp-demo-kv{position:relative;margin:0;flex:1;min-width:170px;display:grid;gap:12px} .lp-demo-kv dt{font-size:.72rem;color:var(--panel-ink2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px} [dir="rtl"] .lp-demo-kv dt{letter-spacing:0;text-transform:none} .lp-demo-kv dd{margin:0;font-weight:700;font-size:.95rem;color:var(--panel-ink)} /* mini-barre d'état sous chaque valeur */ .lp-demo-kv dd::after{content:"";display:block;height:5px;border-radius:99px;margin-top:8px;background:rgba(255,255,255,.09)} .lp-demo-kv dd.is-strong{color:#7FE3BE} .lp-demo-kv dd.is-strong::after{background:linear-gradient(90deg,var(--green),#54c79a);width:82%;box-shadow:0 0 10px -2px rgba(18,133,95,.9)} .lp-demo-kv dd.is-weak{color:var(--gold-hi)} .lp-demo-kv dd.is-weak::after{background:linear-gradient(90deg,var(--gold),var(--gold-hi));width:38%} .lp-score-demo figcaption{ position:relative;margin-top:18px;font-size:.82rem;color:var(--panel-ink2); padding-top:14px;border-top:1px solid var(--panel-line) } /* ============================== 8 · les modules ============================== Quatre « cartes de niveau » : grand numéro fantôme, accent de module, compteur de compétences en badge « XP ». */ .lp-mods{display:grid;gap:14px} .lp-mod{ position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:24px 22px;box-shadow:var(--sh-1); transition:border-color var(--t),transform var(--t),box-shadow var(--t) } .lp-mod::before{ content:"";position:absolute;inset-inline:0;top:0;height:3px; background:linear-gradient(90deg,var(--mc,var(--gold)),transparent);opacity:.9 } .lp-mod:hover{border-color:var(--mc,var(--gold));transform:translateY(-3px);box-shadow:var(--sh-glow)} .lp-mod-n{ font-family:"Baloo Bhaijaan 2",sans-serif;font-size:3rem;font-weight:800; color:var(--mc,var(--gold));opacity:.14;line-height:1; position:absolute;inset-inline-end:16px;top:12px } .lp-mod h3{font-size:1.12rem;padding-inline-end:48px} .lp-mod-count{ display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.74rem;font-weight:800; color:var(--mc,var(--gold-d));background:color-mix(in srgb,var(--mc,var(--gold)) 12%,#fff); border:1px solid color-mix(in srgb,var(--mc,var(--gold)) 26%,#fff); padding:4px 11px;border-radius:99px;letter-spacing:.02em } .lp-mod-count::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8} .lp-mod p{margin-top:13px;color:var(--ink2);font-size:.9rem;line-height:1.75} /* ============================== 9 · pour qui ============================== */ .lp-who{display:grid;gap:14px} .lp-who-card{ position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:26px 24px;box-shadow:var(--sh-1); transition:border-color var(--t),transform var(--t),box-shadow var(--t) } .lp-who-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh-glow)} .lp-who-card h3{font-size:1.16rem} .lp-who-card p{margin-top:11px;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:12px; font-size:.97rem;color:var(--ink2);line-height:1.6; background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px; box-shadow:var(--sh-1) } .lp-notfor svg{color:var(--red);flex:none;margin-top:3px;opacity:.8} .lp-notfor-end{ margin-top:28px;padding:22px 24px;border-radius:var(--r); background:linear-gradient(135deg,var(--gold-l),#FFFDF8);border:1px solid #EFE2C4; font-weight:600;color:var(--ink);line-height:1.7;box-shadow:var(--sh-1) } /* ============================== 12 · résultats ============================== */ .lp-empty{ border:1.5px dashed var(--line-d);border-radius:var(--r); padding:34px 26px;text-align:center;background: repeating-linear-gradient(-45deg,transparent,transparent 12px,rgba(190,133,36,.03) 12px,rgba(190,133,36,.03) 24px), var(--card) } .lp-empty-tag{ display:inline-flex;align-items:center;gap:7px;background:var(--soft);color:var(--ink3); border:1px solid var(--line); padding:5px 13px;border-radius:99px;font-size:.74rem;font-weight:800; letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px } [dir="rtl"] .lp-empty-tag{letter-spacing:0;text-transform:none} .lp-empty-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 0 var(--glow-strong)} .lp-empty p{color:var(--ink2);font-size:.96rem;line-height:1.75;max-width:52ch;margin-inline:auto} /* ============================== 13 · l'offre ============================== « Débloquer l'accès. » La carte de prix : liste de ce qui s'ouvre en vert, puis un socle anthracite où le prix brille en doré comme une récompense. */ .lp-price{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl); overflow:hidden;box-shadow:var(--sh-2) } .lp-price-list{padding:28px 24px} .lp-price-list li{ display:flex;align-items:flex-start;gap:12px; padding-block:10px;font-size:.96rem;line-height:1.55;color:var(--ink) } .lp-price-list svg{ color:#fff;background:var(--green);border-radius:6px;padding:3px;flex:none;margin-top:2px; box-shadow:0 2px 8px -3px rgba(18,133,95,.7) } .lp-price-box{ position:relative;overflow:hidden; background:radial-gradient(120% 120% at 100% 0,var(--panel-2),var(--panel)); color:var(--panel-ink);border-top:1px solid var(--panel-line); padding:30px 24px;text-align:center } .lp-price-box::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 70% at 50% -10%,rgba(231,184,81,.20),transparent 60%) } .lp-price-box>*{position:relative} .lp-price-was{color:var(--panel-ink2);font-size:.88rem} .lp-price-was s{margin-inline-start:6px} .lp-price-tag{ display:inline-flex;align-items:center;gap:7px;margin-top:10px; background:var(--grad-gold);color:#2a2007; padding:5px 14px;border-radius:99px;font-size:.74rem;font-weight:800;letter-spacing:.02em; box-shadow:0 6px 18px -6px var(--glow-strong) } .lp-price-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#2a2007;opacity:.55} .lp-price-now{margin-top:12px;display:flex;align-items:baseline;justify-content:center;gap:9px} .lp-price-now b{ font-family:"Baloo Bhaijaan 2",sans-serif;font-size:3.4rem;line-height:1; background:linear-gradient(180deg,#fff,#F4DFA8);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 2px 10px var(--glow)) } .lp-price-now span{font-size:1.1rem;font-weight:700;color:var(--panel-ink2)} .lp-price-once{margin-top:9px;color:var(--panel-ink);font-size:.92rem;font-weight:500} .lp-price-charged{margin-top:4px;color:var(--panel-ink2);font-size:.84rem} .lp-price-box .lp-btn{ width:100%;margin-top:22px; background:var(--grad-gold);color:#211802; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -12px var(--glow-strong) } .lp-price-box .lp-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 38px -12px var(--glow-strong);transform:translateY(-2px)} .lp-price-secure{margin-top:14px;font-size:.84rem;color:var(--panel-ink2)} .lp-pay-methods{margin-top:18px;padding-top:18px;border-top:1px solid var(--panel-line)} .lp-pay-methods span{font-size:.84rem;color:var(--panel-ink2);display:block;margin-bottom:9px} .lp-pay-methods ul{display:flex;flex-wrap:wrap;gap:7px;justify-content:center} .lp-pay-methods li{ background:rgba(255,255,255,.06);border:1px solid var(--panel-line);border-radius:8px; padding:6px 11px;font-size:.84rem;font-weight:600;color:var(--panel-ink) } /* ============================== 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:19px 4px;cursor:pointer;font-weight:600;font-size:1rem; list-style:none;min-height:48px;transition:color var(--t) } .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(--gold-d);background:var(--gold-l);border-radius:7px;padding:4px; width:26px;height:26px;transition:transform var(--t),background var(--t) } .lp-faq-item[open] summary svg{transform:rotate(180deg)} .lp-faq-item p{padding:0 4px 22px;color:var(--ink2);font-size:.96rem;line-height:1.8;max-width:60ch} /* ============================== 15 · clôture ============================== Bloc « console » plein cadre : anthracite, lueur dorée basse, l'accent du titre passe en doré vif. La dernière invitation à entrer. */ .lp-final{ padding-block:64px;background:radial-gradient(120% 90% at 50% 0,var(--panel-2),var(--panel)); color:var(--panel-ink);border-top:1px solid var(--panel-line);text-align:center; position:relative;overflow:hidden } .lp-final::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(50% 60% at 50% 108%,rgba(231,184,81,.22),transparent 62%) } .lp-final>*{position:relative} .lp-final h2{font-size:1.6rem;color:#fff} .lp-final h2 span{ background:linear-gradient(180deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent } .lp-final-sub{margin-top:18px;color:var(--panel-ink2);font-size:1.05rem} .lp-final .lp-cta{max-width:420px;margin-inline:auto} .lp-final .lp-btn{ background:var(--grad-gold);color:#211802; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -12px var(--glow-strong) } .lp-final .lp-note{color:var(--panel-ink2);border-color:var(--panel-line)} /* ============================== pied de page ============================== */ .lp-foot{background:var(--paper);border-top:1px solid var(--line);padding-block:44px 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;transition:color var(--t)} .lp-foot-col a:hover{color:var(--gold-d)} .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 reste à portée de pouce. Frostée, un filet doré en tête, le bouton porte la même lueur que le primaire. */ .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(251,250,247,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line);box-shadow:0 -14px 34px -26px rgba(23,20,14,.6); transform:translateY(110%);transition:transform var(--t) } .lp-dock::before{ content:"";position:absolute;inset-inline:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--glow-strong),transparent) } .lp-dock.on{transform:none} .lp-dock[hidden]{display:none} .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;font-size:1.06rem;font-weight:800} .lp-dock-price small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink3);font-size:.84rem} .lp-dock-price b s{color:var(--ink3);font-weight:400;font-size:.82rem;margin-inline-start:5px} /* ============================== 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(15,12,7,.55);backdrop-filter:blur(4px)} .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 30px 80px -30px rgba(0,0,0,.6) } .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:26px;height:26px;border-radius:8px;background:var(--gold-l);color:var(--gold-d); border:1px solid #EFE2C4;display:grid;place-items:center;font-family:"Baloo Bhaijaan 2",sans-serif; font-size:.75rem;font-weight:800;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. */ .js .lp-rise{opacity:0;transform:translateY(16px)} .js .lp-rise.seen{opacity:1;transform:none; transition:opacity .6s ease,transform .6s cubic-bezier(.2,.75,.3,1)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .js .lp-rise{opacity:1;transform:none} .lp-ring-fill{stroke-dashoffset:124 !important} } /* ============================== tablette ============================== */ @media (min-width:640px){ .lp-sec{padding-block:76px} .lp-hero{padding-block:52px 72px} .lp-hero h1{font-size:2.7rem} .lp-head h2{font-size:2.05rem} .lp-final h2{font-size:2.05rem} .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:34px} .lp-price-box{padding:34px} /* Flèche « avant → après » entre les deux colonnes, sur deux colonnes. */ .lp-ba{position:relative} .lp-ba::after{ content:"";position:absolute;top:50%;inset-inline-start:50%; width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%; background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);z-index:2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2312855F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6.5 18.5 12 13 17.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center } [dir="rtl"] .lp-ba::after{transform:translate(50%,-50%) scaleX(-1)} } /* ============================== ordinateur ============================== */ @media (min-width:960px){ :root{--gut:28px} .lp-sec{padding-block:92px} .lp-hero{padding-block:72px 92px} .lp-hero h1{font-size:3.2rem} .lp-lead{font-size:1.26rem} /* En-tête compact dès 960 px : langue (globe + nom), connexion et action. Le menu de sections attend d'avoir la place (1040 px plus bas). */ .lp-login{display:inline-block} /* Une : deux colonnes — argument à gauche, tableau de bord à droite. */ .lp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center} .lp-hud{display:block} .lp-diag{grid-template-columns:repeat(3,1fr)} .lp-mods{grid-template-columns:repeat(4,1fr)} .lp-score{grid-template-columns:1.1fr 1fr;align-items:center;gap:34px} .lp-skills{grid-template-columns:1fr 1fr} .lp-chain{grid-template-columns:repeat(2,1fr);column-gap:44px} .lp-chain-step::before{display:none} .lp-dock{display:none !important} } /* ============================== le HUD de la une ============================== Mini tableau de bord « mission » : en-tête (pouls + progression), puis le chemin de compétences. CHAQUE jalon porte une barre qui remplit la largeur — sans elle, la carte paraissait vide. Le jalon courant est allumé, sa barre balaie en continu, et une lueur dérive dans la carte : elle « respire » au lieu de rester figée. Décoratif (aria-hidden) et honnête : c'est la vraie structure du parcours. */ .lp-hud{ position:relative;background:radial-gradient(130% 120% at 100% 0,var(--panel-3),var(--panel)); color:var(--panel-ink);border:1px solid var(--panel-line);border-radius:var(--r-l); padding:20px 20px 22px;box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden } /* lueur dorée + fine grille façon interface */ .lp-hud::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(70% 55% at 15% 0,rgba(231,184,81,.18),transparent 60%), linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 42px } /* lueur qui dérive de haut en bas, lentement : la carte respire */ .lp-hud::after{ content:"";position:absolute;inset-inline:-20%;top:-12%;height:55%;pointer-events:none; background:radial-gradient(60% 100% at 50% 0,rgba(231,184,81,.14),transparent 70%); animation:lp-hud-drift 6s ease-in-out infinite } @keyframes lp-hud-drift{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(130%);opacity:1}} .lp-hud-head{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-bottom:18px} .lp-hud-dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none; box-shadow:0 0 0 0 rgba(18,133,95,.5);animation:lp-pulse 2.4s ease-out infinite} .lp-hud-track{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden} .lp-hud-track i{display:block;height:100%;border-radius:99px;background:var(--grad-gold); box-shadow:0 0 12px -1px var(--glow-strong);width:16%} .js .lp-hud-track i{width:0} .js .lp-hud.seen .lp-hud-track i{width:16%;transition:width 1.1s cubic-bezier(.2,.75,.3,1) .15s} .lp-hud-path{position:relative;z-index:1;display:grid;gap:6px} /* un rail continu derrière les jalons, aligné sur leur centre */ .lp-hud-path::before{ content:"";position:absolute;inset-inline-start:15px;top:20px;bottom:20px;width:2px; background:rgba(255,255,255,.10);z-index:0 } .lp-hud-path li{position:relative;display:flex;align-items:center;gap:13px;padding-block:5px} .lp-hud-node{ width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center; font-family:"Baloo Bhaijaan 2",sans-serif;font-size:.86rem;font-weight:800;color:var(--panel-ink2); background:var(--panel-2);border:1px solid var(--panel-line);z-index:1 } /* la barre qui remplit chaque rangée — largeur décroissante le long du chemin */ .lp-hud-bar{flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.06);position:relative;overflow:hidden} .lp-hud-bar i{ position:absolute;inset-block:0;inset-inline-start:0;display:block;width:var(--w,40%);border-radius:99px; background:linear-gradient(90deg,rgba(231,184,81,.34),rgba(231,184,81,.14)) } [dir="rtl"] .lp-hud-bar i{background:linear-gradient(270deg,rgba(231,184,81,.34),rgba(231,184,81,.14))} .lp-hud-path li:nth-child(1) .lp-hud-bar i{--w:88%} .lp-hud-path li:nth-child(2) .lp-hud-bar i{--w:64%} .lp-hud-path li:nth-child(3) .lp-hud-bar i{--w:47%} .lp-hud-path li:nth-child(4) .lp-hud-bar i{--w:33%} .lp-hud-path li:nth-child(5) .lp-hud-bar i{--w:23%} .lp-hud-path li:nth-child(6) .lp-hud-bar i{--w:13%} /* jalon courant : chip doré qui pulse + barre pleine parcourue d'un reflet */ .lp-hud-path li.on .lp-hud-node{ background:var(--grad-gold);color:#211802;border-color:transparent; animation:lp-hud-glow 2.6s ease-in-out infinite } .lp-hud-path li.on .lp-hud-bar i{background:var(--grad-gold);box-shadow:0 0 12px -2px var(--glow-strong)} .lp-hud-path li.on .lp-hud-bar::after{ content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); animation:lp-hud-sweep 2.9s ease-in-out infinite } [dir="rtl"] .lp-hud-path li.on .lp-hud-bar::after{animation-name:lp-hud-sweep-rtl} @keyframes lp-hud-sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(220%)}} @keyframes lp-hud-sweep-rtl{0%{transform:translateX(100%)}55%,100%{transform:translateX(-220%)}} @keyframes lp-hud-glow{0%,100%{box-shadow:0 0 15px -3px var(--glow-strong)}50%{box-shadow:0 0 24px 1px var(--glow-strong)}} /* cible finale : l'étoile */ .lp-hud-path li.flag .lp-hud-node{ background:rgba(231,184,81,.12);color:var(--gold-hi);border-color:rgba(231,184,81,.4) } .lp-hud-path li.flag .lp-hud-bar i{background:linear-gradient(90deg,rgba(231,184,81,.26),rgba(231,184,81,.08))} /* Menu de sections : révélé seulement là où il tient sans comprimer la marque. */ @media (min-width:1040px){ .lp-nav{display:flex} } /* ============================== Playbook ============================== Le dossier commercial personnalisé : la récompense de la formation, montée comme son actif le plus fort. Même système visuel que le reste de la page — blanc chaud, encre, un accent doré, un vert de progrès, un socle « console » pour la clôture. Vocabulaire d'un déblocage de fin de parcours, jamais d'un jeu tapageur. Les captures sont réelles ; on les cadre, on ne les redessine pas. */ /* En-tête de sous-section : une amorce dorée en surtitre remplace le petit trait du reste de la page — c'est elle qui donne le rythme « chapitre ». */ .pb-eyebrow{ display:inline-flex;align-items:center;gap:10px; color:var(--gold-d);font-weight:800;font-size:.82rem;letter-spacing:.02em; line-height:1.4;margin-bottom:14px } [dir="rtl"] .pb-eyebrow{letter-spacing:0} .pb-eyebrow::before{ content:"";width:22px;height:3px;border-radius:99px;flex:none; background:var(--grad-gold);box-shadow:0 0 12px -2px var(--glow-strong) } .pb-head{max-width:680px;margin-bottom:32px} .pb-head h2{font-size:1.7rem} .pb-head h2 .pb-hi{display:block;color:var(--gold-d);margin-top:5px} .pb-head>p{color:var(--ink2);margin-top:12px;font-size:1.03rem} .pb-head-center{margin-inline:auto;text-align:center} .pb-head-center .pb-eyebrow{justify-content:center} /* --- 1 · pont : suivi de la formation → dossier --- */ .pb-bridge{display:grid;gap:26px} .pb-bridge-txt p{color:var(--ink2);margin-bottom:12px;font-size:1.02rem} .pb-bridge-txt p:last-child{margin-bottom:0} .pb-bridge-strong{color:var(--ink);font-weight:600} /* Cadre « téléphone » autour de la capture d'appli (mobile, plein). */ .pb-phone{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center} .pb-shot-label{ display:inline-flex;align-items:center;gap:7px;margin-bottom:14px; background:var(--gold-l);color:var(--gold-d);border:1px solid #EFE2C4; padding:5px 13px;border-radius:99px;font-size:.74rem;font-weight:800;letter-spacing:.02em } [dir="rtl"] .pb-shot-label{letter-spacing:0} .pb-shot-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 0 var(--glow-strong)} .pb-phone-frame{ width:min(300px,78vw);border:0;padding:9px;cursor:zoom-in; background:linear-gradient(180deg,#2a2418,var(--panel)); border-radius:30px;box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.10); transition:transform var(--t),box-shadow var(--t) } .pb-phone-frame:hover{transform:translateY(-3px);box-shadow:var(--sh-glow),inset 0 1px 0 rgba(255,255,255,.14)} .pb-phone-frame img{width:100%;height:auto;border-radius:22px;display:block} .pb-phone figcaption{margin-top:16px;color:var(--ink3);font-size:.86rem;line-height:1.6;max-width:34ch} /* --- 2 · révélation du Playbook --- */ .pb-reveal{max-width:680px} .pb-reveal>p{color:var(--ink2);margin-bottom:12px;font-size:1.02rem} .pb-reveal-list{margin:18px 0 0;display:grid;gap:11px} .pb-reveal-list li{display:flex;align-items:flex-start;gap:11px;font-weight:600;color:var(--ink);font-size:.98rem} .pb-reveal-list svg{ color:#fff;background:var(--green);border-radius:6px;padding:3px;flex:none;margin-top:1px; box-shadow:0 2px 8px -3px rgba(18,133,95,.7) } .pb-punch{ margin-top:24px;padding:20px 22px;border-radius:var(--r); background:linear-gradient(135deg,var(--gold-l),#FFFDF8); border:1px solid #EFE2C4;box-shadow:var(--sh-1) } .pb-punch p{font-weight:700;color:var(--ink)} .pb-punch-hi{margin-top:4px;color:var(--gold-d);font-weight:800;font-size:1.06rem} /* --- 3 · galerie de captures (preuve) --- */ .pb-gallery-head{max-width:680px;margin-top:46px;margin-bottom:20px} .pb-gallery-head h3{font-size:1.32rem} .pb-gallery-hint{ margin-top:11px;color:var(--ink3);font-size:.85rem; display:flex;gap:16px;flex-wrap:wrap;align-items:center } .pb-gallery-hint span{display:inline-flex;align-items:center;gap:7px} .pb-gallery-hint span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.7} /* Mobile : rail qui glisse (scroll-snap), débordant jusqu'aux marges. */ .pb-gallery{ display:grid;gap:16px;grid-auto-flow:column;grid-auto-columns:82%; overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding-bottom:10px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut); scrollbar-width:thin;scrollbar-color:var(--line-d) transparent } .pb-gallery::-webkit-scrollbar{height:7px} .pb-gallery::-webkit-scrollbar-thumb{background:var(--line-d);border-radius:99px} .pb-card{ scroll-snap-align:start;display:flex;flex-direction:column; background:var(--card);border:1px solid var(--line);border-radius:var(--r-l); overflow:hidden;box-shadow:var(--sh-1);transition:border-color var(--t),box-shadow var(--t) } .pb-card:hover{border-color:var(--gold);box-shadow:var(--sh-glow)} /* La capture est cadrée sur le HAUT du document (l'info clé) ; le plein s'ouvre à la loupe. */ .pb-card-shot{ position:relative;display:block;width:100%;aspect-ratio:4/3; border:0;padding:0;background:var(--soft);cursor:zoom-in;overflow:hidden; border-bottom:1px solid var(--line) } .pb-card-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform var(--t)} .pb-card-shot:hover img{transform:scale(1.03)} /* fondu bas + pastille loupe : le signal « il y a plus à voir » */ .pb-card-shot::after{ content:"";position:absolute;inset-inline:0;bottom:0;height:56px;pointer-events:none; background:linear-gradient(transparent,rgba(23,20,14,.14)) } .pb-card-zoom{ position:absolute;bottom:10px;inset-inline-end:10px;z-index:1; width:34px;height:34px;border-radius:9px;color:#fff; background:rgba(22,18,9,.72);display:grid;place-items:center; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px) } .pb-card-body{padding:18px 18px 20px} .pb-card-label{ display:inline-flex;align-items:center;gap:6px; background:var(--gold-l);color:var(--gold-d);border:1px solid #EFE2C4; padding:4px 11px;border-radius:99px;font-size:.72rem;font-weight:800;letter-spacing:.02em } [dir="rtl"] .pb-card-label{letter-spacing:0} .pb-card-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)} .pb-card-body h4{ font-family:"Baloo Bhaijaan 2","Readex Pro",system-ui,sans-serif;font-weight:800; font-size:1.04rem;line-height:1.35;margin:11px 0 0;color:var(--ink);letter-spacing:-.01em } [dir="rtl"] .pb-card-body h4{letter-spacing:0;line-height:1.5} .pb-card-body p{margin-top:8px;color:var(--ink2);font-size:.92rem;line-height:1.7} /* --- 4 · ce que le dossier contient encore --- */ .pb-more{display:grid;gap:12px} .pb-more-card{ position:relative;display:flex;gap:15px; background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:20px;box-shadow:var(--sh-1); transition:border-color var(--t),transform var(--t),box-shadow var(--t) } .pb-more-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh-glow)} .pb-more-n{ font-family:"Baloo Bhaijaan 2",sans-serif;font-size:.85rem;font-weight:800;color:var(--gold-d); flex:none;width:34px;height:34px;border-radius:10px;background:var(--gold-l);border:1px solid #EFE2C4; display:grid;place-items:center;box-shadow:var(--sh-1) } .pb-more-card h3{font-size:1.04rem} .pb-more-card p{margin-top:6px;color:var(--ink2);font-size:.92rem;line-height:1.65} /* --- 5 · pourquoi il n'est pas générique --- */ .pb-build{display:grid;gap:10px} .pb-build li{ display:flex;align-items:center;gap:12px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-s); padding:14px 16px;box-shadow:var(--sh-1);font-weight:600;color:var(--ink);font-size:.95rem } .pb-build-dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 4px var(--green-l)} .pb-build-close{margin-top:26px;max-width:680px;color:var(--ink);font-weight:600;font-size:1.04rem;line-height:1.7} /* --- 6 · pile de valeur avant le prix --- */ .pb-stack{max-width:520px;margin-inline:auto;display:grid;gap:8px} .pb-stack li{ display:flex;align-items:center;gap:14px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-s); padding:14px 18px;box-shadow:var(--sh-1);font-weight:600;color:var(--ink);font-size:.98rem } .pb-stack-plus{ font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;color:var(--gold-d); font-size:1.15rem;flex:none;width:22px;text-align:center;line-height:1 } .pb-stack li:first-child .pb-stack-plus{visibility:hidden} /* Le dernier étage — le dossier personnel — est le sommet : traité en doré. */ .pb-stack li:last-child{ background:linear-gradient(135deg,var(--gold-l),#FFFDF8);border-color:#EFE2C4; color:var(--gold-d);font-weight:800;box-shadow:var(--sh-glow) } .pb-value-end{margin-top:26px;text-align:center;max-width:520px;margin-inline:auto} .pb-value-end p{color:var(--ink2);font-size:1.02rem} .pb-value-end-hi{margin-top:6px;color:var(--ink);font-weight:800;font-size:1.14rem} /* --- 7 · clôture du bloc : socle « console » --- */ .pb-final{ background:radial-gradient(120% 90% at 50% 0,var(--panel-2),var(--panel)); color:var(--panel-ink);border-block:1px solid var(--panel-line); position:relative;overflow:hidden;text-align:center } .pb-final::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(50% 60% at 50% 108%,rgba(231,184,81,.20),transparent 62%) } .pb-final-in{position:relative;max-width:640px;margin-inline:auto} .pb-final h2{color:#fff;font-size:1.6rem} .pb-eyebrow-dark{color:var(--gold-hi);justify-content:center} .pb-final-sub{margin-top:16px;color:var(--panel-ink2);font-size:1.05rem;line-height:1.7} .pb-final-cta{display:flex;flex-direction:column;gap:12px;margin-top:26px;max-width:440px;margin-inline:auto} .pb-final-cta .lp-btn{width:100%} .pb-final-cta .lp-btn:not(.lp-btn-ghost){ background:var(--grad-gold);color:#211802; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -12px var(--glow-strong) } .pb-final-cta .lp-btn:not(.lp-btn-ghost):hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 38px -12px var(--glow-strong);transform:translateY(-2px) } .pb-final-cta .lp-btn-ghost{background:transparent;color:var(--panel-ink);box-shadow:inset 0 0 0 1.5px var(--panel-line)} .pb-final-cta .lp-btn-ghost:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 1px var(--glow)} .pb-final-trust{margin-top:18px;color:var(--panel-ink2);font-size:.86rem;line-height:1.6} /* --- loupe (lightbox) : une fenêtre réutilisée pour toutes les captures --- */ .pb-lightbox{ border:0;padding:0;background:transparent;color:#fff; max-width:96vw;max-height:96vh;overflow:visible } .pb-lightbox::backdrop{background:rgba(12,10,6,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .pb-lightbox[open]{animation:lpmodal .24s cubic-bezier(.2,.75,.3,1) both} #pb-lightbox-img{ display:block;max-width:96vw;max-height:90vh;width:auto;height:auto; border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7) } .pb-lightbox-x{ position:fixed;top:14px;inset-inline-end:14px;z-index:2; width:44px;height:44px;border:0;border-radius:12px;cursor:pointer; background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background var(--t) } .pb-lightbox-x:hover{background:rgba(255,255,255,.26)} /* Indices de la galerie selon le support. L'astuce « fais glisser » ne vaut que là où le rail glisse (mobile/tablette) ; passé le grand écran (galerie en trois colonnes fixes), elle n'a plus de sens et disparaît. Sélecteur assez spécifique pour battre `.pb-gallery-hint span` posé plus haut. */ @media (min-width:960px){.pb-gallery-hint .pb-hint-swipe{display:none}} /* Playbook — tablette. */ @media (min-width:640px){ .pb-head h2{font-size:2.05rem} .pb-more{grid-template-columns:1fr 1fr} .pb-build{grid-template-columns:1fr 1fr} .pb-final h2{font-size:2.05rem} .pb-final-cta{flex-direction:row;justify-content:center;max-width:none} .pb-final-cta .lp-btn{width:auto} } /* Playbook — ordinateur. */ @media (min-width:960px){ /* Pont sur deux colonnes : l'argument, puis le téléphone. */ .pb-bridge{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:56px} /* Galerie en trois colonnes, sans rail. */ .pb-gallery{ grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto; overflow:visible;margin-inline:0;padding-inline:0;padding-bottom:0 } .pb-build{grid-template-columns:repeat(3,1fr)} } /* ============================== brique « preuve écran » ============================== Une capture RÉELLE de la plateforme, en grand, à côté de l'argument qu'elle prouve. Réutilisée quatre fois, jamais regroupée. Sur téléphone : texte puis capture, empilés. Sur grand écran : deux colonnes, côté alterné (`is-flip`). Le cadre « téléphone » et la loupe sont ceux du Playbook — même langage. */ .lp-shot-sec{overflow:hidden} .lp-shot{display:grid;gap:30px} .lp-shot-txt .pb-eyebrow{margin-bottom:14px} .lp-shot-txt h2{font-size:1.7rem} .lp-shot-p{color:var(--ink2);margin-top:14px;font-size:1.03rem;line-height:1.7;max-width:46ch} .lp-shot-p:first-of-type{margin-top:16px} /* Le plan 90 jours : liste d'actions courtes, cochées vert. */ .lp-shot-lines{margin-top:22px;display:grid;gap:10px} .lp-shot-lines li{display:flex;align-items:flex-start;gap:11px;font-weight:600;color:var(--ink);font-size:.98rem} .lp-shot-lines svg{color:#fff;background:var(--green);border-radius:6px;padding:3px;flex:none;margin-top:1px; box-shadow:0 2px 8px -3px rgba(18,133,95,.7)} /* Diagnostic : deux phrases après l'écran, la seconde forte. */ .lp-shot-after{margin-top:22px} .lp-shot-after p{color:var(--ink2);font-size:1.02rem;line-height:1.7} .lp-shot-after p.is-strong{color:var(--ink);font-weight:700;font-size:1.1rem;margin-top:4px} /* Surlignage doré — le « punch » d'une section. */ .lp-shot-hi{ margin-top:24px;padding:18px 20px;border-radius:var(--r); background:linear-gradient(135deg,var(--gold-l),#FFFDF8);border:1px solid #EFE2C4; box-shadow:var(--sh-1);color:var(--gold-d);font-weight:800;font-size:1.06rem;line-height:1.6 } .lp-shot-more{margin-top:24px} /* La figure : cadre « téléphone » (réutilisé du Playbook) + légende compacte. */ .lp-shot-fig{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center} .lp-shot-frame{position:relative;width:min(300px,74vw)} .lp-shot-sec.is-strong .lp-shot-frame{width:min(340px,82vw)} .lp-shot-cap{ margin-top:16px;color:var(--ink3);font-size:.85rem;font-weight:600;line-height:1.7; max-width:40ch;letter-spacing:.01em } [dir="rtl"] .lp-shot-cap{letter-spacing:0} /* Deux colonnes sur grand écran ; le côté de la capture alterne. */ @media (min-width:960px){ .lp-shot{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:64px} .lp-shot.is-flip{grid-template-columns:auto minmax(0,1fr)} .lp-shot.is-flip .lp-shot-txt{order:2} .lp-shot.is-flip .lp-shot-fig{order:1} .lp-shot-sec.is-strong .lp-shot-frame{width:min(380px,38vw)} } /* Prix de la une : sous les boutons, discret mais présent. */ .lp-hero-price{margin-top:22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .lp-hero-price b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:1.5rem;font-weight:800;color:var(--ink)} .lp-hero-price span{color:var(--ink3);font-size:.86rem;font-weight:600} /* Pile de valeur : le socle prix, en carte arrondie autonome. */ .vs-price{margin-top:30px;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)} .vs-price .lp-price-box{border-top:0} @media (min-width:640px){.vs-price .lp-price-box{padding:34px}} /* Barre basse ALLÉGÉE : plus courte, pour ne pas recouvrir les captures. Le bouton porte l'action ; le prix reste compact à côté, sans prix barré. */ .lp-dock{padding-block:8px;padding-block-end:calc(8px + env(safe-area-inset-bottom))} .lp-dock .lp-btn{min-height:44px;padding-block:9px;font-size:.95rem} .lp-dock-price b{font-size:.98rem} .lp-dock-price small{font-size:.72rem} /* Personnalisation depuis le diagnostic (§30) : un bandeau doré discret, posé en tête de la section prix quand le visiteur arrive du funnel /diagnostic. */ .pb-perso{ max-width:var(--narrow);margin:0 auto 28px;padding:16px 20px;border-radius:var(--r); background:linear-gradient(135deg,var(--gold-l),#FFFDF8);border:1px solid #EFE2C4; border-inline-start:3px solid var(--gold);box-shadow:var(--sh-1);text-align:start } .pb-perso-k{display:inline-flex;color:var(--gold-d);font-weight:800;font-size:.82rem;margin-bottom:6px} .pb-perso p{color:var(--ink);font-weight:600;font-size:1rem;line-height:1.6} /* ============================== programme partenaire ============================== Une opportunité SECONDAIRE, posée après le prix. Même langage que le reste : blanc chaud, encre, un accent doré, un vert réservé à la confirmation. Rien du vocabulaire « gagne de l'argent » — juste un programme partenaire propre, intégré à un produit éducatif premium. Le CTA doit rester en retrait par rapport au bouton noir de la formation : il est doré, contour, jamais plein. */ .pt-grid{display:grid;gap:38px} .pt-intro>h2{font-size:1.6rem;margin-top:2px} .pt-title-2{display:block;color:var(--gold-d);margin-top:6px;font-size:.92em;line-height:1.4} [dir="rtl"] .pt-title-2{line-height:1.55} .pt-copy{margin-top:16px;color:var(--ink2);font-size:1.03rem;line-height:1.7;max-width:46ch} .pt-reassure{ margin-top:14px;color:var(--ink3);font-size:.9rem;line-height:1.65;max-width:44ch; padding-inline-start:13px;border-inline-start:2px solid var(--line-d) } /* Les 3 étapes : pastilles dorées numérotées, comme « ce que le dossier contient encore ». Volontairement sobres — le cœur du bloc, ce sont les montants à droite. */ .pt-steps{margin:28px 0 0;display:grid;gap:16px;list-style:none;padding:0;counter-reset:none} .pt-steps li{display:flex;align-items:flex-start;gap:14px} .pt-step-n{ font-family:"Baloo Bhaijaan 2",sans-serif;font-size:.9rem;font-weight:800;color:var(--gold-d); flex:none;width:32px;height:32px;border-radius:9px;background:var(--gold-l);border:1px solid #EFE2C4; display:grid;place-items:center;box-shadow:var(--sh-1) } .pt-step-txt h3{font-size:1rem;color:var(--ink)} [dir="rtl"] .pt-step-txt h3{line-height:1.5} .pt-step-txt p{margin-top:4px;color:var(--ink2);font-size:.9rem;line-height:1.6} /* CTA pleine largeur sur téléphone (repasse en « auto » dès la tablette). */ .pt-cta-wrap{margin-top:30px} .pt-cta-wrap .pt-btn{width:100%} /* CTA partenaire : contour doré, JAMAIS plein — il ne doit pas rivaliser avec le bouton noir de la formation. Pleine largeur sur téléphone. */ .pt-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 26px;min-height:52px;border-radius:var(--r); font-family:inherit;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer; background:var(--card);color:var(--gold-d); box-shadow:inset 0 0 0 1.5px var(--gold),var(--sh-1); transition:transform var(--t),box-shadow var(--t),background var(--t) } .pt-btn:hover{ background:var(--gold-l);transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 1px var(--glow),var(--sh-glow) } .pt-arrow{flex:none} [dir="rtl"] .pt-arrow{transform:scaleX(-1)} .pt-cta-sub{margin-top:12px;color:var(--ink3);font-size:.84rem;line-height:1.6;max-width:40ch} /* Les 3 paliers : montant en grand, empilés. Le dernier — le sommet — en doré, comme le dernier étage de la pile de valeur. */ .pt-tiers{display:grid;gap:12px;align-content:start} .pt-tier{ display:flex;align-items:center;gap:18px; background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:18px 20px;box-shadow:var(--sh-1); transition:border-color var(--t),transform var(--t),box-shadow var(--t) } .pt-tier:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--sh-glow)} .pt-tier-val{flex:none;display:flex;align-items:baseline;gap:5px;min-width:96px} .pt-tier-val b{ font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:2.1rem; line-height:1;color:var(--ink);letter-spacing:-.02em } .pt-tier-val span{font-size:.82rem;font-weight:700;color:var(--ink3)} .pt-tier-meta{min-width:0} .pt-tier-label{ display:inline-flex;align-items:center;gap:6px; background:var(--gold-l);color:var(--gold-d);border:1px solid #EFE2C4; padding:3px 10px;border-radius:99px;font-size:.7rem;font-weight:800;letter-spacing:.02em } [dir="rtl"] .pt-tier-label{letter-spacing:0} .pt-tier-per{margin-top:8px;color:var(--ink);font-weight:600;font-size:.92rem} .pt-tier-range{margin-top:3px;color:var(--ink3);font-size:.82rem} .pt-tier-bonus{ display:inline-flex;align-items:center;gap:6px;margin-top:9px; color:var(--green-d);font-weight:700;font-size:.8rem } .pt-tier-bonus::before{ content:"";width:6px;height:6px;border-radius:50%;flex:none; background:var(--green);box-shadow:0 0 0 3px var(--green-l) } /* Le sommet : palier doré. */ .pt-tier-top{ background:linear-gradient(135deg,var(--gold-l),#FFFDF8); border-color:#EFE2C4;box-shadow:var(--sh-glow) } .pt-tier-top .pt-tier-val b{color:var(--gold-d)} .pt-tier-top .pt-tier-label{background:var(--card);border-color:var(--gold-l)} /* La ligne forte, centrée, après les cartes. */ .pt-strong{margin-top:34px;text-align:center;max-width:560px;margin-inline:auto} .pt-strong-hi{color:var(--ink);font-weight:800;font-size:1.16rem;line-height:1.5} .pt-strong-sub{margin-top:7px;color:var(--ink2);font-size:1rem;line-height:1.6} /* Barre de règlement — secondaire : petite, sourde, séparateurs en point. */ .pt-pay{ margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center; gap:8px 20px;color:var(--ink3);font-size:.84rem;font-weight:500;text-align:center } .pt-pay span{display:inline-flex;align-items:center} .pt-pay span+span::before{ content:"";width:4px;height:4px;border-radius:50%;background:var(--line-d); margin-inline-end:20px;flex:none } /* Relance secondaire dans la section prix : une note, pas un bloc plein. */ .pt-mini{ margin-top:26px;padding:20px 22px;border-radius:var(--r); background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--gold); box-shadow:var(--sh-1);max-width:var(--narrow);margin-inline:auto } .pt-mini-q{color:var(--ink);font-weight:700;font-size:1rem} .pt-mini-body{margin-top:7px;color:var(--ink2);font-size:.92rem;line-height:1.65} .pt-mini-link{ display:inline-flex;align-items:center;gap:7px;margin-top:12px; color:var(--gold-d);font-weight:700;font-size:.92rem;text-decoration:none; transition:gap var(--t) } .pt-mini-link:hover{gap:11px;text-decoration:underline;text-underline-offset:3px} /* Partenaire — tablette : les paliers passent en trois colonnes égales. */ @media (min-width:640px){ .pt-intro>h2{font-size:1.9rem} .pt-cta-wrap .pt-btn{width:auto} .pt-tiers{grid-template-columns:repeat(3,1fr)} .pt-tier{flex-direction:column;align-items:flex-start;gap:12px;text-align:start} .pt-tier-val{min-width:0} } /* Partenaire — ordinateur : deux colonnes. À GAUCHE l'argument et le CTA, à DROITE les trois paliers. On ne se contente pas d'étirer le mobile. */ @media (min-width:960px){ .pt-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:start} .pt-tiers{grid-template-columns:1fr;position:sticky;top:88px} .pt-tier{flex-direction:row;align-items:center;gap:18px;text-align:start} .pt-tier-val{min-width:104px} } /* ========================================================================== V2 — page d'accueil du compagnon commercial Le parcours V1 (hero, captures, pile de valeur) a été retiré ; ces classes « lp2- » habillent la nouvelle page, à côté des « lp- » du chrome (en-tête, pied, boutons) qui restent partagés. ========================================================================== */ .lp2-in { max-width: 980px; margin: 0 auto; padding: 0 20px; } .lp2-sec { padding: 64px 0; } .lp2-sec-alt { background: #FBFAF7; } .lp2-hero { padding: 72px 0 56px; text-align: center; } .lp2-kicker { color: #C9A227; font-weight: 700; letter-spacing: .3px; margin: 0 0 14px; } .lp2-h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.2; margin: 0 0 18px; font-weight: 800; } .lp2-lead { font-size: clamp(16px, 2.4vw, 20px); line-height: 1.65; color: #3a3a3a; max-width: 720px; margin: 0 auto 22px; } .lp2-hero .lp2-lead { margin-inline: auto; } .lp2-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; } .lp2-cta-note { color: #6b6b6b; font-size: 14px; margin: 12px 0 0; } .lp-btn-ghost { background: transparent; color: #111; border: 1px solid #d8d3c9; } .lp2-h2 { font-size: clamp(22px, 3.4vw, 32px); line-height: 1.25; margin: 0 0 10px; font-weight: 800; text-align: center; } .lp2-sub { color: #5b5b5b; text-align: center; max-width: 640px; margin: 0 auto 34px; } /* la boucle : quatre pas numérotés */ .lp2-loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } .lp2-step { background: #fff; border: 1px solid #E8E5DF; border-radius: 16px; padding: 22px; position: relative; } .lp2-step-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: #111; color: #fff; font-weight: 800; margin-bottom: 12px; } .lp2-step h3 { margin: 0 0 8px; font-size: 18px; } .lp2-step p { margin: 0; color: #444; line-height: 1.6; } /* les trois segments */ .lp2-cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } .lp2-card { background: #fff; border: 1px solid #E8E5DF; border-radius: 16px; padding: 22px; } .lp2-card h3 { margin: 0 0 10px; font-size: 18px; } .lp2-card p { margin: 0; color: #444; line-height: 1.6; } .lp2-honest { max-width: 760px; text-align: center; } /* prix + packs */ .lp2-price { text-align: center; } .lp2-price-tag { display: flex; align-items: baseline; gap: 8px; justify-content: center; margin: 6px 0 18px; } .lp2-price-n { font-size: clamp(40px, 8vw, 64px); font-weight: 800; line-height: 1; } .lp2-price-u { color: #6b6b6b; font-weight: 600; } .lp2-packs { list-style: none; margin: 0 auto 22px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); max-width: 640px; } .lp2-packs li { border: 1px solid #E8E5DF; border-radius: 14px; padding: 14px; background: #fff; } .lp2-packs b { display: block; font-size: 15px; } .lp2-packs span { display: block; font-size: 18px; font-weight: 700; margin: 4px 0 2px; } .lp2-packs small { color: #6b6b6b; } /* faq */ .lp2-faq { max-width: 760px; margin: 0 auto; } .lp2-faq details { border-bottom: 1px solid #E8E5DF; padding: 14px 0; } .lp2-faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; } .lp2-faq summary::-webkit-details-marker { display: none; } .lp2-faq summary::before { content: '＋'; color: #C9A227; margin-inline-end: 8px; } .lp2-faq details[open] summary::before { content: '−'; } .lp2-faq p { margin: 10px 0 0; color: #444; line-height: 1.65; } .lp2-final { text-align: center; background: #FBFAF7; } @media (max-width: 720px) { .lp2-loop, .lp2-cards, .lp2-packs { grid-template-columns: 1fr; } }