/* ========================================================================= Tijara — programme partenaire (page publique) ------------------------------------------------------------------------- Feuille AUTONOME. Elle ne charge ni landing.css ni app.css, et c'est volontaire : le fond est BLANC ici, là où tout le reste du site est crème (#FFFBF2). Partager les variables ferait dériver l'un vers l'autre au premier ajout. L'accent est l'OR DE LA MARQUE, relevé directement sur le logotype (#BD8524) : la page doit se reconnaître comme la même maison que la page d'accueil, sans réutiliser sa palette crème. Règles héritées du reste du site : — mobile d'abord ; — RTL par propriétés logiques (inline-start/end), jamais left/right ; — aucun emoji, aucun dégradé de marque tapageur ; — animations discrètes, et coupées si l'appareil le demande. ========================================================================= */ :root{ --w:#FFFFFF; --w2:#FBFAF8; /* section alternée, à peine détachée du blanc */ --w3:#F5F3EF; --line:#EAE7E1; --line-d:#DBD6CC; --ink:#1E1E1E; --ink2:#666666; --ink3:#9A948B; /* or de la marque, relevé sur le logotype */ --gold:#BD8524; --gold-d:#9A6B18; --gold-l:#FBF5EA; --gold-line:#EBDCBF; /* vert du reste du site — réservé aux états « confirmé » */ --green:#0F9B6C; --green-l:#E8F5EF; --red:#B93F29; --red-l:#FBECE8; --r:14px; --r-s:10px; --r-l:20px; --t:.25s cubic-bezier(.2,.75,.3,1); --gut:20px; --wide:1140px; --narrow:780px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px} /* Pas d'overflow-x:hidden ici. Sur , un overflow-x non-visible force overflow-y à `auto` : le corps devient alors son propre conteneur de défilement, la fenêtre ne défile plus, et l'IntersectionObserver de l'apparition ne se déclenche jamais pour ce qui est sous la ligne de flottaison — toute la page reste à opacity:0. Le débordement horizontal est déjà coupé là où il naît : .ap-hero{overflow:hidden}. */ body.ap{ margin:0;background:var(--w);color:var(--ink); font-family:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif; font-size:17px;font-weight:400;line-height:1.9; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:"Baloo Bhaijaan 2","Readex Pro",system-ui,sans-serif; font-weight:800;line-height:1.35;letter-spacing:0;margin:0} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} img{max-width:100%;display:block} a{color:var(--gold-d);text-underline-offset:4px} b,strong{font-weight:700} svg{flex:none} :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px} /* Les chiffres restent en latin même en RTL : « 2 000 » se lit mieux que sa transcription, et c'est ce que les gens voient sur leur relevé. */ .num{font-variant-numeric:tabular-nums;direction:ltr;display:inline-block;unicode-bidi:isolate} .ap-skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100; background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 10px 10px;font-weight:600} .ap-skip:focus{inset-inline-start:0} .ap-wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--gut)} .ap-narrow{max-width:var(--narrow);margin-inline:auto} /* ============================== en-tête ============================== */ .ap-bar{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88); border-bottom:1px solid var(--line);backdrop-filter:saturate(150%) blur(12px); transition:box-shadow var(--t) } .ap-bar.stuck{box-shadow:0 8px 24px -20px rgba(30,30,30,.5)} .ap-bar-in{max-width:var(--wide);margin:0 auto;padding:11px var(--gut); display:flex;align-items:center;gap:12px} .ap-brand{display:flex;align-items:center;gap:10px;text-decoration:none; color:var(--ink);margin-inline-end:auto;min-width:0} .ap-brand img{height:30px;width:auto} .ap-brand span{display:none;font-family:"Baloo Bhaijaan 2",serif;font-weight:700; font-size:1rem;white-space:nowrap;padding-inline-start:11px; border-inline-start:1px solid var(--line-d);color:var(--ink2)} .ap-nav{display:none;gap:2px} .ap-nav a{text-decoration:none;color:var(--ink2);font-size:.9rem;font-weight:500; padding:8px 12px;border-radius:9px;transition:var(--t);white-space:nowrap} .ap-nav a:hover{background:var(--w3);color:var(--ink)} .ap-login{display:none;text-decoration:none;color:var(--ink2);font-weight:600; font-size:.9rem;padding:8px 6px;white-space:nowrap} .ap-login:hover{color:var(--ink)} /* Sélecteur de langue — la page existe désormais dans les trois langues du site. Même composant

que partout ailleurs, habillé de la palette de cette feuille. Le nom de la langue est toujours affiché ; sur petit écran, c'est le globe qui s'efface pour laisser le nom tenir à côté de l'action. */ .ap-lang.langpick{position:relative;flex:none;display:block} .langpick summary{ display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer; background:var(--w);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: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)} .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:170px; list-style:none;margin:0;padding:6px; background:var(--w);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 16px 34px -18px rgba(30,30,30,.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:var(--t) } .langpick ul a:hover{background:var(--w3)} .langpick ul a[aria-current]{background:var(--gold-l);color:var(--gold-d);font-weight:700} @media (max-width:520px){ .ap-lang.langpick summary > svg:first-child{display:none} } /* ============================== boutons ============================== */ /* Sur téléphone, l'action de l'en-tête cède la place : c'est .ap-dock qui la porte en bas. Elle réapparaît dans l'en-tête à partir de 900 px (voir plus bas). Sans ça, marque + sélecteur de langue + libellés longs débordent. */ .ap-bar .ap-btn{display:none} .ap-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--ink);color:#fff;text-decoration:none; font-family:inherit;font-size:1rem;font-weight:600;line-height:1; padding:16px 26px;border:0;border-radius:99px;cursor:pointer; transition:transform var(--t),background var(--t),box-shadow var(--t); box-shadow:0 1px 2px rgba(30,30,30,.16) } .ap-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(30,30,30,.6)} .ap-btn:active{transform:translateY(0)} .ap-btn-sm{padding:11px 18px;font-size:.9rem} .ap-btn-lg{padding:19px 34px;font-size:1.06rem;width:100%} .ap-btn-gold{background:var(--gold);box-shadow:0 1px 2px rgba(189,133,36,.3)} .ap-btn-gold:hover{background:var(--gold-d);box-shadow:0 10px 24px -12px rgba(189,133,36,.8)} .ap-btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-d);box-shadow:none} .ap-btn-ghost:hover{background:var(--w3);color:var(--ink);border-color:var(--ink3);box-shadow:none} /* ============================== sections ============================== */ .ap-sec{padding:62px 0} .ap-sec-alt{background:var(--w2);border-block:1px solid var(--line)} .ap-eyebrow{display:inline-flex;align-items:center;gap:8px; font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--gold-d); background:var(--gold-l);border:1px solid var(--gold-line); padding:6px 14px;border-radius:99px;margin-bottom:16px} .ap-h2{font-size:1.72rem;margin-bottom:12px} .ap-lead{color:var(--ink2);font-size:1.02rem;line-height:1.85} .ap-head{margin-bottom:34px} .ap-head .ap-lead{max-width:60ch} /* ============================== la une ============================== */ .ap-hero{padding:44px 0 56px;position:relative;overflow:hidden} /* Halo doré très dilué. Il donne de la profondeur sans poser d'aplat de couleur : la page doit rester dominée par le blanc. Centré par inset-inline + margin auto, et NON par translateX : les transformations ignorent le sens de lecture, si bien qu'un translateX(50%) accordé au LTR décale le halo hors cadre une fois la page en RTL — ce qui est justement le sens de celle-ci. */ .ap-hero::before{ content:"";position:absolute;inset-block-start:-320px;inset-inline:0; width:760px;max-width:100%;height:600px;margin-inline:auto; background:radial-gradient(closest-side,rgba(189,133,36,.13),transparent 72%); pointer-events:none } .ap-hero-in{position:relative} .ap-hero h1{font-size:2.1rem;margin-bottom:16px;max-width:19ch} .ap-hero h1 em{font-style:normal;color:var(--gold-d);display:block} .ap-hero .ap-lead{font-size:1.08rem;max-width:46ch} /* L'argument central : encadré, parce que c'est LA phrase qui distingue ce programme d'un barème plat. */ .ap-kicker{ margin-top:26px;background:var(--gold-l);border:1px solid var(--gold-line); border-radius:var(--r-l);padding:20px 22px;max-width:56ch; border-inline-start:4px solid var(--gold) } .ap-kicker b{display:block;color:var(--gold-d);font-size:.95rem;margin-bottom:6px} .ap-kicker p{font-size:1rem;line-height:1.8} .ap-cta{display:flex;flex-direction:column;gap:11px;margin-top:28px;max-width:440px} .ap-points{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:26px;max-width:520px} .ap-points li{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--ink2)} .ap-points svg{color:var(--green)} /* ====================== les paliers en un coup d'œil ====================== */ /* Trois montants alignés : c'est ce qu'un visiteur doit retenir en 20 s. */ .ap-ladder{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:30px 0} .ap-ladder-step{ background:var(--w);border:1.5px solid var(--line);border-radius:var(--r); padding:14px 20px;text-align:center;min-width:104px;transition:var(--t) } .ap-ladder-step b{display:block;font-family:"Baloo Bhaijaan 2",sans-serif; font-size:1.5rem;font-weight:800;line-height:1.1} .ap-ladder-step small{display:block;font-size:.72rem;color:var(--ink3);margin-top:3px} .ap-ladder-step.on{border-color:var(--gold);background:var(--gold-l)} .ap-ladder-step.on b{color:var(--gold-d)} .ap-ladder-arrow{color:var(--ink3);flex:none} /* La flèche suit la PROGRESSION 50 → 70 → 90. En RTL (arabe) les montants se lisent de droite à gauche : la flèche pointe alors à GAUCHE. En LTR (fr/en) ils se lisent de gauche à droite : la flèche garde son sens par défaut, vers la droite. D'où le retournement conditionnel au sens de lecture. (Le style en ligne sur était ignoré — il ne relaie que `class`.) */ [dir="rtl"] .ap-ladder-arrow .ico{transform:scaleX(-1)} /* Reprise de l'échelle dans la relance finale : même composant, moins de place à prendre — le lecteur l'a déjà vue en haut de page. */ .ap-ladder-compact{margin:22px 0 14px} .ap-ladder-compact .ap-ladder-step{padding:11px 16px;min-width:88px} .ap-ladder-compact .ap-ladder-step b{font-size:1.25rem} /* ============================== étapes ============================== */ .ap-steps{display:grid;gap:14px} .ap-step{ background:var(--w);border:1px solid var(--line);border-radius:var(--r-l); padding:24px 22px;position:relative;transition:var(--t) } .ap-step:hover{border-color:var(--gold-line);box-shadow:0 14px 32px -26px rgba(30,30,30,.55)} .ap-step-n{ font-family:"Baloo Bhaijaan 2",sans-serif;font-size:.86rem;font-weight:800; color:var(--gold-d);background:var(--gold-l);border:1px solid var(--gold-line); width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px } .ap-step h3{font-size:1.12rem;margin-bottom:7px} .ap-step p{color:var(--ink2);font-size:.95rem;line-height:1.8} .ap-note{ margin-top:22px;display:flex;gap:11px;align-items:flex-start; background:var(--w3);border-radius:var(--r);padding:15px 18px; font-size:.88rem;color:var(--ink2);line-height:1.75 } .ap-note svg{color:var(--ink3);margin-top:3px} /* ============================== cartes de palier ============================== */ .ap-tiers{display:grid;gap:18px} .ap-tier{ background:var(--w);border:1.5px solid var(--line);border-radius:var(--r-l); padding:26px 24px;display:flex;flex-direction:column;position:relative; transition:var(--t) } .ap-tier:hover{box-shadow:0 22px 46px -34px rgba(30,30,30,.6)} /* Le dernier palier est mis en avant, mais sans aplat sombre : la page doit rester blanche, et un palier « premium » se signale par un filet, pas par un fond noir. */ .ap-tier-top{border-color:var(--gold);box-shadow:0 22px 46px -34px rgba(189,133,36,.85)} .ap-tier-top::before{ content:"";position:absolute;inset-block-start:-1.5px;inset-inline:22px; height:3px;border-radius:0 0 4px 4px;background:var(--gold) } .ap-tier-badge{ display:inline-flex;align-self:flex-start;align-items:center;gap:7px; font-size:.74rem;font-weight:700;letter-spacing:.05em; color:var(--ink2);background:var(--w3);border:1px solid var(--line); padding:5px 12px;border-radius:99px;margin-bottom:14px } .ap-tier-top .ap-tier-badge{color:var(--gold-d);background:var(--gold-l);border-color:var(--gold-line)} .ap-tier h3{font-size:1.4rem;margin-bottom:4px} .ap-tier-range{font-size:.88rem;color:var(--ink2);margin-bottom:18px} .ap-tier-rate{display:flex;align-items:baseline;gap:8px; padding-block:16px;border-block:1px dashed var(--line-d);margin-bottom:16px} .ap-tier-rate b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:2.7rem; font-weight:800;line-height:1;color:var(--ink)} .ap-tier-top .ap-tier-rate b{color:var(--gold-d)} .ap-tier-rate span{font-size:1rem;font-weight:600;color:var(--ink2)} .ap-tier-rate small{display:block;font-size:.8rem;color:var(--ink3);font-weight:400;margin-top:4px} .ap-tier-bonus{ background:var(--gold-l);border:1px solid var(--gold-line);border-radius:var(--r); padding:14px 16px;margin-bottom:16px } .ap-tier-bonus b{display:block;color:var(--gold-d);font-size:1rem;margin-bottom:8px} .ap-tier-bonus p{font-size:.88rem;color:var(--ink2);line-height:1.75;margin-bottom:8px} /* Le calcul écrit noir sur blanc : « 20 × 100 = 2 000 ». C'est la preuve du mécanisme, elle doit se lire d'un coup d'œil et sans ambiguïté de sens de lecture — d'où le passage forcé en LTR. */ .ap-formula{ direction:ltr;text-align:center;background:var(--w);border:1px dashed var(--gold); border-radius:var(--r-s);padding:11px 12px; font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:1.06rem; color:var(--gold-d);font-variant-numeric:tabular-nums } .ap-formula em{font-style:normal;color:var(--ink3);font-weight:600;padding-inline:4px} .ap-tier-text{font-size:.93rem;color:var(--ink2);line-height:1.8;margin-bottom:18px} .ap-tier .ap-btn{margin-top:auto} /* barre de progression décorative des cartes */ .ap-tier-track{height:6px;background:var(--w3);border-radius:99px;overflow:hidden;margin-bottom:8px} .ap-tier-track i{display:block;height:100%;background:var(--gold);border-radius:99px} .ap-tier-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink3);margin-bottom:16px} /* ============================== exemples chiffrés ============================== */ .ap-examples{display:grid;gap:18px} .ap-ex{background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden} .ap-ex-head{background:var(--w3);padding:15px 22px;border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .ap-ex-head b{font-size:1.02rem} .ap-ex-tag{font-size:.72rem;font-weight:700;color:var(--gold-d); background:var(--gold-l);border:1px solid var(--gold-line);padding:4px 11px;border-radius:99px} .ap-ex-body{padding:22px} .ap-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:11px 0;border-bottom:1px dashed var(--line);font-size:.95rem} .ap-line:last-of-type{border-bottom:0} .ap-line span{color:var(--ink2)} .ap-line b{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800; font-size:1.06rem;white-space:nowrap} .ap-line-calc b{color:var(--ink)} .ap-line-bonus b{color:var(--gold-d)} .ap-ex-total{ margin-top:16px;background:var(--ink);color:#fff;border-radius:var(--r); padding:17px 20px;display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap } .ap-ex-total span{font-size:.9rem;opacity:.78} .ap-ex-total b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:1.55rem;font-weight:800;line-height:1} .ap-ex-mean{margin-top:14px;font-size:.9rem;color:var(--ink2);line-height:1.8} /* étape « puis » entre deux blocs de calcul */ .ap-then{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--ink3);font-size:.85rem} .ap-then::before,.ap-then::after{content:"";height:1px;background:var(--line);flex:1} /* ============================== avancement ============================== */ .ap-panel{ background:var(--w);border:1px solid var(--line);border-radius:var(--r-l); padding:22px;box-shadow:0 26px 54px -40px rgba(30,30,30,.5) } .ap-panel-head{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;margin-bottom:18px} .ap-panel-head small{display:block;font-size:.76rem;color:var(--ink3);margin-bottom:2px} .ap-panel-head b{font-size:1.16rem;font-family:"Baloo Bhaijaan 2",sans-serif} .ap-chip{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600; padding:6px 13px;border-radius:99px;background:var(--w3);color:var(--ink2);border:1px solid var(--line)} .ap-chip-gold{background:var(--gold-l);color:var(--gold-d);border-color:var(--gold-line)} .ap-chip-green{background:var(--green-l);color:#0A7250;border-color:#C6E7D9} .ap-chip-red{background:var(--red-l);color:var(--red);border-color:#F2D3CB} .ap-bar-track{height:12px;background:var(--w3);border:1px solid var(--line); border-radius:99px;overflow:hidden;position:relative} .ap-bar-fill{display:block;height:100%;background:var(--gold);border-radius:99px; transition:width .9s cubic-bezier(.2,.75,.3,1)} .ap-bar-scale{display:flex;justify-content:space-between;margin-top:9px; font-size:.8rem;color:var(--ink2);font-weight:500} .ap-remain{margin-top:16px;font-size:1rem;line-height:1.8} .ap-remain b{color:var(--gold-d)} /* Bonus potentiel : jamais présenté comme un solde. Le fond reste clair et la mention « ماشي رصيد ديالك دابا » l'accompagne toujours — un montant non acquis affiché comme disponible est une promesse qu'on n'a pas faite. */ .ap-potential{ margin-top:16px;border:1px dashed var(--gold);background:var(--gold-l); border-radius:var(--r);padding:15px 18px } .ap-potential-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .ap-potential-top span{font-size:.88rem;color:var(--gold-d);font-weight:600} .ap-potential-top b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:1.42rem;color:var(--gold-d)} .ap-potential small{display:block;margin-top:7px;font-size:.8rem;color:var(--ink2);line-height:1.7} /* ============================== tableau de bord (aperçu) ============================== */ .ap-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:18px} .ap-stat{background:var(--w2);border:1px solid var(--line);border-radius:var(--r);padding:15px} .ap-stat small{display:block;font-size:.75rem;color:var(--ink3);margin-bottom:5px;line-height:1.5} .ap-stat b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:1.3rem;line-height:1.1;display:block} .ap-stat i{font-style:normal;font-size:.8rem;font-weight:400;color:var(--ink2)} .ap-stat-gold b{color:var(--gold-d)} .ap-stat-green b{color:#0A7250} .ap-linkrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .ap-linkbox{ flex:1 1 200px;min-width:0;background:var(--w2);border:1px solid var(--line); border-radius:var(--r-s);padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.84rem;color:var(--ink2);direction:ltr;text-align:left; overflow:hidden;text-overflow:ellipsis;white-space:nowrap } /* Le journal des ventes. Sur téléphone il devient une pile de cartes : un tableau à cinq colonnes n'a aucune chance sur 360 px, et imposer un défilement horizontal sur la section qui prouve la transparence serait le pire endroit où le faire. */ .ap-log{border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .ap-log-row{display:grid;gap:4px 12px;padding:13px 15px;border-bottom:1px solid var(--line);font-size:.86rem} .ap-log-row:last-child{border-bottom:0} .ap-log-head{display:none} .ap-log-row dt{font-size:.72rem;color:var(--ink3)} .ap-log-row dd{margin:0;font-weight:500} .ap-log-cell{display:flex;justify-content:space-between;gap:12px;align-items:baseline} /* ============================== qui / bonnes pratiques ============================== */ .ap-cards{display:grid;gap:13px} .ap-card{background:var(--w);border:1px solid var(--line);border-radius:var(--r-l); padding:22px;transition:var(--t)} .ap-card:hover{border-color:var(--gold-line);box-shadow:0 14px 32px -28px rgba(30,30,30,.6)} .ap-card h3{font-size:1.08rem;margin-bottom:7px} .ap-card p{color:var(--ink2);font-size:.94rem;line-height:1.8} .ap-card-icon{width:40px;height:40px;border-radius:12px;background:var(--gold-l); border:1px solid var(--gold-line);color:var(--gold-d);display:grid;place-items:center;margin-bottom:14px} .ap-numcard{display:flex;gap:16px;align-items:flex-start} .ap-numcard>b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:1.1rem;color:var(--gold-d); background:var(--gold-l);border:1px solid var(--gold-line); width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none} /* ============================== outils ============================== */ .ap-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px} .ap-chips li{background:var(--w);border:1px solid var(--line);border-radius:99px; padding:9px 16px;font-size:.88rem;color:var(--ink2);display:flex;align-items:center;gap:8px} .ap-chips svg{color:var(--gold)} /* ============================== règles ============================== */ .ap-rules{display:grid;gap:2px;background:var(--line);border:1px solid var(--line); border-radius:var(--r-l);overflow:hidden} .ap-rules li{background:var(--w);padding:15px 20px;display:flex;gap:12px; align-items:flex-start;font-size:.94rem;line-height:1.75} .ap-rules svg{color:var(--ink3);margin-top:5px} .ap-warn{ margin-top:18px;background:var(--red-l);border:1px solid #F2D3CB; border-radius:var(--r);padding:16px 18px;font-size:.92rem;color:var(--red); display:flex;gap:11px;align-items:flex-start;line-height:1.75 } /* ============================== règlement ============================== */ .ap-payout{display:grid;gap:12px;margin-bottom:22px} .ap-payout-item{background:var(--w);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px} .ap-payout-item small{display:block;font-size:.8rem;color:var(--ink3);margin-bottom:6px} .ap-payout-item b{font-size:1.06rem;font-family:"Baloo Bhaijaan 2",sans-serif} .ap-payout-item.tbd b{color:var(--ink3);font-weight:600;font-size:.95rem;font-family:inherit} .ap-balances{display:grid;gap:11px} .ap-balance{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--w)} .ap-balance b{display:block;font-size:.98rem;margin-bottom:4px} .ap-balance small{color:var(--ink2);font-size:.86rem;line-height:1.7} .ap-balance-pending{border-inline-start:3px solid var(--ink3)} .ap-balance-confirmed{border-inline-start:3px solid var(--gold)} .ap-balance-available{border-inline-start:3px solid var(--green)} .ap-balance-paid{border-inline-start:3px solid var(--line-d)} /* ============================== simulateur ============================== */ .ap-calc{background:var(--w);border:1.5px solid var(--line);border-radius:var(--r-l); padding:24px 22px;box-shadow:0 26px 54px -42px rgba(30,30,30,.55)} .ap-calc label{display:block;font-size:.9rem;font-weight:600;margin-bottom:12px} .ap-calc-input{display:flex;align-items:center;gap:10px;margin-bottom:18px} .ap-calc-input input[type=number]{ flex:1;min-width:0;font-family:"Baloo Bhaijaan 2",sans-serif;font-size:1.5rem;font-weight:800; text-align:center;padding:13px 10px;border:1.5px solid var(--line-d);border-radius:var(--r-s); background:var(--w);color:var(--ink);direction:ltr } .ap-calc-input input[type=number]:focus{border-color:var(--gold);outline:none} .ap-calc-step{width:48px;height:48px;flex:none;border:1.5px solid var(--line-d);background:var(--w); border-radius:var(--r-s);font-size:1.4rem;color:var(--ink2);cursor:pointer;line-height:1; display:grid;place-items:center;transition:var(--t)} .ap-calc-step:hover{border-color:var(--gold);color:var(--gold-d);background:var(--gold-l)} /* Le curseur : la manière la plus rapide de « sentir » les paliers au pouce. */ .ap-calc input[type=range]{width:100%;margin-bottom:8px;accent-color:var(--gold);height:26px} .ap-calc-marks{display:flex;justify-content:space-between;font-size:.72rem; color:var(--ink3);margin-bottom:20px;direction:ltr} .ap-calc-out{display:grid;gap:9px;margin-bottom:16px} .ap-calc-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:13px 16px;border-radius:var(--r-s);background:var(--w2);border:1px solid var(--line)} .ap-calc-row span{font-size:.9rem;color:var(--ink2)} .ap-calc-row b{font-family:"Baloo Bhaijaan 2",sans-serif;font-size:1.14rem;white-space:nowrap} .ap-calc-row.bonus{background:var(--gold-l);border-color:var(--gold-line)} .ap-calc-row.bonus b,.ap-calc-row.bonus span{color:var(--gold-d)} .ap-calc-row.total{background:var(--ink);border-color:var(--ink)} .ap-calc-row.total span{color:rgba(255,255,255,.78)} .ap-calc-row.total b{color:#fff;font-size:1.42rem} .ap-calc-tier{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;padding:12px 0;border-top:1px dashed var(--line-d);margin-bottom:6px} .ap-calc-tier span{font-size:.85rem;color:var(--ink2)} .ap-calc-detail{margin-top:10px} .ap-calc-detail summary{cursor:pointer;font-size:.86rem;color:var(--ink2); font-weight:600;padding:8px 0;list-style:none} .ap-calc-detail summary::-webkit-details-marker{display:none} .ap-calc-detail summary::before{content:"+";display:inline-block;width:18px;color:var(--gold-d);font-weight:800} .ap-calc-detail[open] summary::before{content:"−"} .ap-calc-detail ul{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden} .ap-calc-detail li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px; font-size:.86rem;border-bottom:1px solid var(--line);background:var(--w)} .ap-calc-detail li:last-child{border-bottom:0} .ap-calc-detail li b{font-weight:700;white-space:nowrap} .ap-calc-detail li.is-bonus{background:var(--gold-l);color:var(--gold-d)} /* ============================== questions ============================== */ .ap-faq{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--w)} .ap-faq details{border-bottom:1px solid var(--line)} .ap-faq details:last-child{border-bottom:0} .ap-faq summary{ cursor:pointer;list-style:none;padding:18px 20px;font-weight:600;font-size:1rem; display:flex;align-items:center;justify-content:space-between;gap:14px;transition:var(--t) } .ap-faq summary::-webkit-details-marker{display:none} .ap-faq summary:hover{background:var(--w2)} .ap-faq summary::after{ content:"";width:9px;height:9px;flex:none; border-inline-end:2px solid var(--ink3);border-block-end:2px solid var(--ink3); transform:rotate(45deg);transition:transform var(--t);margin-block-start:-4px } .ap-faq details[open] summary::after{transform:rotate(225deg);margin-block-start:4px} .ap-faq details[open] summary{color:var(--gold-d)} .ap-faq-a{padding:0 20px 20px;color:var(--ink2);font-size:.95rem;line-height:1.85} /* ============================== dernière relance ============================== */ .ap-final{background:var(--w2);border-top:1px solid var(--line);padding:64px 0;text-align:center} .ap-final h2{font-size:1.72rem;margin-bottom:12px} .ap-final .ap-lead{margin-inline:auto;max-width:52ch} .ap-final .ap-cta{margin-inline:auto} .ap-final-note{margin-top:12px;font-size:.86rem;color:var(--ink3)} .ap-final-bonus{margin-top:6px;font-size:.95rem;color:var(--gold-d);font-weight:600} /* ============================== pied ============================== */ .ap-foot{border-top:1px solid var(--line);padding:38px 0 30px;background:var(--w)} .ap-foot-in{max-width:var(--wide);margin:0 auto;padding-inline:var(--gut);text-align:center} .ap-foot img{height:34px;width:auto;margin:0 auto 14px} .ap-foot p{color:var(--ink2);font-size:.88rem;max-width:52ch;margin:0 auto 16px;line-height:1.8} .ap-foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px} .ap-foot nav a{color:var(--ink2);font-size:.88rem;text-decoration:none} .ap-foot nav a:hover{color:var(--gold-d);text-decoration:underline} .ap-foot small{color:var(--ink3);font-size:.8rem} /* ============================== barre collée ============================== Sur téléphone, le bouton d'inscription 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 d'emblée masquerait le premier appel à l'action qu'elle duplique. */ .ap-dock{ position:fixed;inset-inline:0;bottom:0;z-index:45; background:rgba(255,255,255,.94);backdrop-filter:blur(12px); border-top:1px solid var(--line);padding:11px var(--gut); padding-bottom:calc(11px + env(safe-area-inset-bottom)); display:flex;align-items:center;gap:12px; transform:translateY(110%);transition:transform var(--t); box-shadow:0 -8px 30px -22px rgba(30,30,30,.6) } .ap-dock.on{transform:translateY(0)} .ap-dock-txt{flex:1;min-width:0;line-height:1.35} .ap-dock-txt b{display:block;font-size:.94rem;font-family:"Baloo Bhaijaan 2",sans-serif} .ap-dock-txt small{font-size:.76rem;color:var(--ink3)} .ap-dock .ap-btn{flex:none} /* ============================== formulaire ============================== */ .ap-form{background:var(--w);border:1px solid var(--line);border-radius:var(--r-l); padding:26px 22px;box-shadow:0 26px 54px -42px rgba(30,30,30,.55)} .ap-field{margin-bottom:16px} .ap-field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:7px} .ap-field input[type=text],.ap-field input[type=email], .ap-field input[type=tel],.ap-field input[type=password]{ width:100%;font-family:inherit;font-size:1rem;padding:13px 15px; border:1.5px solid var(--line-d);border-radius:var(--r-s);background:var(--w);color:var(--ink) } .ap-field input:focus{border-color:var(--gold);outline:none} .ap-hint{font-size:.8rem;color:var(--ink3);margin-top:6px;line-height:1.6} .ap-err{font-size:.84rem;color:var(--red);margin-top:6px;font-weight:500} .ap-check{display:flex;gap:11px;align-items:flex-start;font-size:.9rem; color:var(--ink2);line-height:1.7;margin-bottom:18px} .ap-check input{margin-top:6px;width:19px;height:19px;accent-color:var(--gold);flex:none} .ap-alt{text-align:center;margin-top:18px;font-size:.9rem;color:var(--ink2)} /* ============================== apparition ============================== */ .js .ap-rise{opacity:0;transform:translateY(16px)} .js .ap-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;transition-duration:.001ms !important} .js .ap-rise{opacity:1;transform:none} } /* ============================== tablette ============================== */ @media (min-width:640px){ .ap-hero h1{font-size:2.6rem} .ap-h2,.ap-final h2{font-size:2.05rem} .ap-sec{padding:76px 0} .ap-cta{flex-direction:row} .ap-btn-lg{width:auto} .ap-steps{grid-template-columns:1fr 1fr} .ap-cards{grid-template-columns:1fr 1fr} .ap-stats{grid-template-columns:repeat(4,1fr)} .ap-payout{grid-template-columns:repeat(3,1fr)} .ap-balances{grid-template-columns:1fr 1fr} .ap-examples{grid-template-columns:1fr 1fr} .ap-panel{padding:28px} .ap-tier-rate b{font-size:3rem} /* Le journal reprend sa forme de tableau dès qu'il y a la place. */ .ap-log-head{display:grid} .ap-log-row{grid-template-columns:.9fr 1.3fr 1fr .9fr .7fr;align-items:center} .ap-log-row dt{display:none} .ap-log-cell{display:block} .ap-log-head .ap-log-cell{font-size:.74rem;color:var(--ink3);font-weight:600} } /* ============================== bureau ============================== */ @media (min-width:900px){ .ap-brand span{display:inline} .ap-login{display:inline-flex} .ap-dock{display:none} /* L'action revient dans l'en-tête dès qu'on quitte le téléphone : sur mobile c'est la barre basse (.ap-dock) qui la porte, et la doubler dans un en-tête déjà chargé (marque + langue + libellés longs) le faisait déborder. */ .ap-bar .ap-btn{display:inline-flex} .ap-hero{padding:64px 0 78px} .ap-hero h1{font-size:3.05rem} .ap-sec{padding:92px 0} .ap-h2,.ap-final h2{font-size:2.3rem} .ap-steps{grid-template-columns:repeat(4,1fr)} .ap-tiers{grid-template-columns:repeat(3,1fr);align-items:stretch} .ap-cards{grid-template-columns:repeat(4,1fr)} .ap-cards.ap-cards-5{grid-template-columns:repeat(5,1fr)} .ap-balances{grid-template-columns:repeat(4,1fr)} .ap-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .ap-split .ap-head{margin-bottom:0} .ap-ladder-step{min-width:126px;padding:18px 26px} .ap-ladder-step b{font-size:1.9rem} } @media (min-width:1100px){ .ap-hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center} } /* Le menu de sections n'apparaît que là où il tient vraiment : marque + menu + langue + action, en libellés longs (fr/en), ne rentrent pas plus tôt. Le lien « connexion » cède alors sa place au menu — il reste accessible au pied de page — plutôt que de faire déborder la barre. En dessous, en-tête compact : marque + langue + action. */ @media (min-width:1160px){ .ap-nav{display:flex} .ap-login{display:none} }