/* Pages de présentation pour le fondateur : audit, marketing, notre travail, deal.
   Même D.A. que la home (verre, bleu électrique, Drop). Une idée = un visuel, très peu de texte. */

:root { --rouge: #ff5468; }
.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pitch { max-width: 1180px; margin: 0 auto; padding: 28px 24px 170px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 128px; }
.p-entete .p-pour { color: var(--eclat); }
.p-entete .actions { padding-right: 10px; font-size: 13.5px; font-weight: 600; color: var(--doux); }

/* Apparition douce au défilement (seulement si le script tourne). */
.js .revele { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.js .revele.vu { opacity: 1; transform: none; }

/* Haut de page : le titre à gauche, Drop à droite dans un halo bleu. */
.p-heros { position: relative; overflow: hidden; border-radius: 34px; min-height: 540px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; }
.p-heros::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 65% at 80% 58%, rgba(18, 56, 255, 0.5), transparent 70%), radial-gradient(40% 40% at 8% 0%, rgba(124, 155, 255, 0.14), transparent 70%); }
.p-heros::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 46%; opacity: 0.5; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.3px); background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(60% 60% at 60% 55%, #000, transparent); mask-image: radial-gradient(60% 60% at 60% 55%, #000, transparent); }
.p-heros-texte { position: relative; z-index: 1; padding: 60px 0 60px 60px; display: grid; gap: 24px; justify-items: start; }
.p-heros h1 { font-size: clamp(44px, 6vw, 80px); margin: 0; }
.p-heros h1 .texte-glace { display: inline-block; padding-bottom: 0.06em; }
.p-heros p { margin: 0; max-width: 480px; font-size: 18.5px; line-height: 1.5; color: rgba(244, 246, 255, 0.75); }
.p-heros-drop { position: relative; z-index: 1; width: min(430px, 100%); justify-self: center; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); animation: flotte 6s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-14px); } }

/* Chiffres clés sous un titre. */
.p-chiffres { display: flex; flex-wrap: wrap; gap: 12px 34px; }
.p-chiffres div { display: grid; gap: 2px; }
.p-chiffres b { font-family: var(--titre); font-weight: 400; font-size: 30px; line-height: 1; }
.p-chiffres small { font-size: 13px; color: var(--doux); }
.p-duo { display: flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 600; color: var(--doux); }
.p-duo .avs { display: flex; }
.p-duo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #0a0f2a; }
.p-duo img + img { margin-left: -12px; }
.p-duo a { color: var(--texte); }
.p-duo a:hover { color: var(--eclat); }
.p-acquis { display: grid; gap: 10px; }
.p-acquis > small { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vert); }
.p-acquis .rangee { gap: 8px; }
.p-acquis .puce .ic { color: var(--vert); }

/* En-tête de bloc : le titre, puis une phrase. */
.p-bloc { display: grid; gap: 34px; scroll-margin-top: 100px; }
.p-bloc > .etiquette { margin: 0 0 -14px; }
.p-tete { display: grid; gap: 18px; }
.p-tete h2 { font-size: clamp(34px, 4.6vw, 60px); margin: 0; }
.p-tete p { margin: 0; font-size: 17.5px; line-height: 1.55; color: var(--doux); max-width: 600px; }
.p-tete p b { color: var(--texte); font-weight: 600; }

.p-grille { display: grid; gap: 14px; grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr)); }
.p-carte { position: relative; overflow: hidden; border-radius: 24px; padding: 24px; display: grid; gap: 10px; align-content: start; }
.p-carte h3 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.p-carte p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--doux); }
.p-carte .bulle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 4px; }
.p-carte .bulle .ic { width: 21px; height: 21px; }

.p-liens { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.p-liens .ic { width: 17px; height: 17px; }

/* Gravité dans l'audit. */
.grav { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.grav.critique { color: #ff8796; background: rgba(255, 84, 104, 0.14); border: 1px solid rgba(255, 84, 104, 0.3); }
.grav.haute { color: #ffb37a; background: rgba(255, 140, 60, 0.12); border: 1px solid rgba(255, 140, 60, 0.28); }

/* Vue d'ensemble de l'audit : 8 problèmes. */
.problemes { --col: 4; }
.probleme { min-height: 178px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s; }
.probleme:hover { transform: translateY(-4px); border-color: rgba(124, 155, 255, 0.4); }
.probleme .haut-carte { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.probleme .num { font-family: var(--titre); font-size: 15px; color: var(--eclat); }
.probleme h3 { font-size: 18px; }
.probleme p { font-size: 14px; }

/* Avant / après : on glisse la poignée pour comparer. */
.aa { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 1200 / 575; --pos: 50%; user-select: none; }
.aa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aa-apres { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.aa-trait { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 18px rgba(124, 155, 255, 0.9); pointer-events: none; }
.aa-poignee { position: absolute; top: 50%; left: var(--pos); width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; pointer-events: none; }
.aa-poignee .ic { width: 22px; height: 22px; }
.aa-label { position: absolute; top: 16px; z-index: 1; pointer-events: none; }
.aa-label.avant { left: 16px; }
.aa-label.apres { right: 16px; }
.aa input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 2; }

/* Le nom : les marques concurrentes, puis le renommage. */
.noms { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.nom-marque { border-radius: 20px; padding: 22px 10px 16px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.nom-marque b { font-size: clamp(17px, 1.8vw, 24px); }
.nom-marque small { font-size: 12px; color: var(--doux); }
.renommage { position: relative; overflow: hidden; border-radius: 28px; padding: 40px; display: grid; grid-template-columns: auto auto auto 1fr; gap: 28px; align-items: center; }
.renommage s { font-family: var(--titre); font-size: clamp(30px, 5vw, 64px); text-transform: uppercase; color: rgba(255, 255, 255, 0.45); text-decoration-color: var(--rouge); text-decoration-thickness: 5px; }
.renommage .ic { width: 40px; height: 40px; }
.renommage b { font-family: var(--titre); font-weight: 400; font-size: clamp(38px, 6.4vw, 84px); text-transform: uppercase; line-height: 1; }
.renommage .ou { justify-self: end; display: grid; gap: 8px; justify-items: end; text-align: right; font-size: 14.5px; color: rgba(255, 255, 255, 0.8); }
.avertissement { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; color: var(--doux); }
.avertissement .ic { color: #ffb37a; margin-top: 1px; }
.avertissement b { color: var(--texte); }

/* Deux cartes face à face (aujourd'hui / notre proposition). */
.duo { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 14px; }
.duo .p-carte { padding: 30px; min-height: 300px; gap: 16px; }
.duo .gros { margin: 6px 0 0; font-size: clamp(30px, 3.6vw, 46px); }
.duo p.gros { color: #fff; line-height: 1; max-width: 78%; }
.duo s.gros { display: block; color: rgba(255, 255, 255, 0.4); text-decoration-color: var(--rouge); text-decoration-thickness: 4px; }
.duo .deco { position: absolute; right: -30px; bottom: -40px; width: 230px; opacity: 0.9; pointer-events: none; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5)); }
.p-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 70%; }
.p-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.p-liste .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--vert); }

/* Récompenses : barres de rakeback + Drop VIP. */
.vip { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 14px; align-items: stretch; }
.jauges { border-radius: 26px; padding: 30px; display: grid; gap: 22px; align-content: start; }
.jauges > small { font-size: 13px; color: var(--doux); }
.barre { display: grid; grid-template-columns: 200px minmax(0, 1fr) 96px; gap: 14px; align-items: center; font-size: 14.5px; font-weight: 600; }
.barre .piste { position: relative; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.barre .piste i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) / 25 * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.6)); transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.barre.mauvaise .piste i { background: linear-gradient(90deg, #ff5468, #ff8796); }
.barre.bleue .piste i { background: linear-gradient(90deg, #1238ff, #7c9bff); box-shadow: 0 0 18px rgba(59, 98, 255, 0.8); }
.barre.bleue .piste i + i { width: calc(var(--d) / 25 * 100%); background: rgba(255, 255, 255, 0.28); box-shadow: none; }
.barre b { font-family: var(--titre); font-weight: 400; font-size: 20px; text-align: right; }
.js .jauges:not(.vu) .piste i { width: 0; }
.vip-drop { position: relative; overflow: hidden; border-radius: 26px; display: grid; place-items: center; padding: 20px; min-height: 300px; }
.vip-drop img { width: min(300px, 90%); filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.55)); }
.vip-avantages { --col: 3; }
.vip-folie { border-radius: 24px; padding: 24px 28px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center; }
.vip-folie .bulle { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; }
.vip-folie .bulle .ic { width: 26px; height: 26px; }
.vip-folie b { display: block; font-size: 19px; margin-bottom: 4px; }
.vip-folie p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); max-width: 760px; }
.patience { display: flex; gap: 10px; align-items: center; margin: -14px 0 0; font-size: 14.5px; color: var(--doux); }
.patience b { color: var(--texte); }
.patience .ic { width: 18px; height: 18px; flex: none; color: var(--eclat); }

/* Originals : 3 aujourd'hui, 7 à la sortie, +1 jeu signature. */
.originaux { display: flex; gap: 12px; flex-wrap: wrap; }
.originaux .tuile { width: calc((100% - 7 * 12px) / 8); min-width: 120px; }
.originaux .tuile .nom b { font-size: clamp(15px, 1.5vw, 20px); }
.signature { position: relative; overflow: hidden; width: calc((100% - 7 * 12px) / 8); min-width: 120px; aspect-ratio: 155 / 210; border-radius: 18px; display: grid; place-items: center; text-align: center; padding: 12px; }
.signature b { font-family: var(--titre); font-weight: 400; font-size: 56px; line-height: 1; }
.signature small { position: absolute; left: 8px; right: 8px; bottom: 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.compte-jeux { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 700; }
.compte-jeux .ic { width: 18px; height: 18px; color: var(--doux); }

/* Les raisons de revenir qui manquent. */
.manques { --col: 4; }
.manque { min-height: 150px; }
.manque .ic.grande { width: 26px; height: 26px; color: var(--eclat); margin-bottom: 6px; }
.manque h3 { font-size: 16.5px; }
.manque small { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: #ff9aa6; }
.manque small .ic { width: 15px; height: 15px; margin-top: 1px; color: var(--rouge); }

/* Fin de page : carte vers la page suivante. */
.fin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.suite { position: relative; overflow: hidden; border-radius: 28px; padding: 32px; min-height: 190px; display: grid; align-content: space-between; gap: 18px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.suite:hover { transform: translateY(-4px); }
.suite small { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.suite b { font-size: clamp(28px, 3.2vw, 40px); }
.suite p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.7); max-width: 380px; }
.suite .ic { position: absolute; right: 30px; bottom: 30px; width: 34px; height: 34px; transition: transform 0.3s; }
.suite:hover .ic { transform: translateX(6px); }

/* ---------- Marketing ---------- */

/* Les 6 leviers en un coup d'œil. */
.leviers { --col: 7; }
.levier { border-radius: 20px; padding: 18px 16px; display: grid; gap: 10px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.levier:hover { transform: translateY(-4px); }
.levier span { font-family: var(--titre); font-size: 14px; color: var(--eclat); }
.levier b { font-size: 15px; line-height: 1.25; }

/* Marque du fondateur : exemples + profil X à construire. */
.fondateur-zone { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; }
.exemples { display: grid; gap: 12px; }
.exemple { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; border-radius: 20px; padding: 18px 20px; }
.exemple .marque { font-family: var(--titre); font-size: 20px; text-transform: uppercase; color: var(--eclat); }
.exemple b { display: block; font-size: 16px; }
.exemple small { font-size: 13.5px; color: var(--doux); }
a.exemple { transition: box-shadow 0.3s; }
a.exemple:hover { box-shadow: inset 0 0 0 1px rgba(124, 155, 255, 0.5); }
a.source { text-decoration: underline; text-decoration-color: rgba(124, 155, 255, 0.5); text-underline-offset: 3px; }
a.source:hover { color: var(--eclat); }
.profil { border-radius: 26px; overflow: hidden; display: grid; align-content: start; }
.profil-banniere { height: 120px; background: radial-gradient(80% 140% at 80% 0%, rgba(124, 155, 255, 0.55), transparent 60%), linear-gradient(120deg, #061266, #1238ff 60%, #3b62ff); }
.profil-corps { padding: 0 26px 26px; display: grid; gap: 12px; }
.profil-avatar { width: 92px; height: 92px; margin-top: -46px; border-radius: 50%; display: grid; place-items: center; border: 4px solid #0a0d1a; background: linear-gradient(160deg, #1a1f33, #0a0d1a); overflow: hidden; }
.profil-avatar img { width: 128%; max-width: none; margin-top: 18%; }
.profil-nom b { font-size: 20px; }
.profil-nom small { display: block; font-size: 14px; color: var(--doux); }
.profil-corps p { margin: 0; font-size: 15px; line-height: 1.5; }
.profil-corps .rangee { gap: 8px; }

/* Posts X d'Oasis (maquettes). */
.posts { --col: 3; align-items: start; }
.post { border-radius: 22px; padding: 18px; display: grid; gap: 12px; }
.post-tete { display: flex; gap: 10px; align-items: center; }
.post-tete .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.post-tete .av svg { width: 22px; height: 22px; }
.post-tete b { font-size: 14.5px; display: block; }
.post-tete small { font-size: 12.5px; color: var(--doux); }
.post p { margin: 0; font-size: 15px; line-height: 1.45; }
.post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.post-pied { display: flex; gap: 18px; font-size: 12.5px; color: var(--doux); font-variant-numeric: tabular-nums; }
.formats { gap: 8px; }

/* La machine à clips : étapes + mur de clips qui défile. */
.machine { position: relative; overflow: hidden; border-radius: 34px; padding: 48px 0 40px; display: grid; gap: 36px; scroll-margin-top: 100px; }
.machine::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 100%, rgba(18, 56, 255, 0.4), transparent 70%); }
.machine > * { position: relative; }
.machine-haut { padding: 0 48px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: center; }
.machine-haut h2 { font-size: clamp(34px, 4.6vw, 60px); margin: 0 0 14px; }
.machine-haut p { margin: 0; max-width: 520px; font-size: 17.5px; line-height: 1.55; color: var(--doux); }
.machine-haut img { width: 260px; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.55)); animation: flotte 6s ease-in-out infinite; }
.etapes { padding: 0 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: etape; }
.etape { position: relative; border-radius: 22px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.etape:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -14px; width: 14px; height: 2px; background: linear-gradient(90deg, rgba(124, 155, 255, 0.8), rgba(124, 155, 255, 0.1)); }
.etape .haut-carte { display: flex; justify-content: space-between; align-items: center; }
.etape .bulle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }
.etape .bulle .ic { width: 21px; height: 21px; }
.etape .n { font-family: var(--titre); font-size: 13px; color: var(--doux); }
.etape b { font-size: 17px; }
.etape p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--doux); }
.etape .gros { font-family: var(--titre); font-size: 26px; line-height: 1; }
.clips { display: grid; gap: 12px; }
.clips .defile { gap: 12px; animation-duration: 60s; }
.clips .defile.inverse { animation-direction: reverse; animation-duration: 70s; }
.clip { position: relative; overflow: hidden; width: 150px; aspect-ratio: 9 / 16; border-radius: 18px; flex: none; border: 1px solid rgba(255, 255, 255, 0.1); }
.clip img { width: 100%; height: 100%; object-fit: cover; }
.clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 22%, transparent 55%, rgba(0, 0, 0, 0.85)); }
.clip .reseau { position: absolute; z-index: 1; top: 10px; left: 10px; height: 22px; padding: 0 8px; border-radius: 7px; display: flex; align-items: center; font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, 0.55); }
.clip b { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 32px; font-size: 14px; line-height: 1.2; }
.clip small { position: absolute; z-index: 1; left: 10px; bottom: 11px; display: flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.clip small .ic { width: 11px; height: 11px; fill: #fff; stroke: none; }
/* L'armée d'affiliés, sous le mur de clips. */
.armee { margin: 0 48px; border-radius: 24px; padding: 24px 28px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center; }
.armee .bulle { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; }
.armee .bulle .ic { width: 26px; height: 26px; }
.armee b { display: block; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 4px; }
.armee p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); max-width: 640px; }
.citation { margin: 0; padding: 0 48px; font-family: var(--titre); text-transform: uppercase; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; max-width: 900px; }
.citation span { color: var(--eclat); }

/* Coups d'éclat. */
/* Un exemple de coup d'éclat, avec sa source. */
.coup { border-radius: 24px; padding: 24px 28px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.coup .bulle { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; }
.coup .bulle .ic { width: 26px; height: 26px; }
.coup small { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eclat); }
.coup h3 { margin: 4px 0; font-size: 21px; }
.coup p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--doux); }
.coup .bouton-verre .ic { width: 16px; height: 16px; }

/* Tracking : l'entonnoir de la vue au revenu. */
.suivi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 14px; align-items: stretch; }
.entonnoir { border-radius: 26px; padding: 26px; display: grid; gap: 10px; justify-items: center; align-content: center; }
.entonnoir div { width: var(--l); min-width: 190px; border-radius: 16px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: linear-gradient(90deg, rgba(18, 56, 255, 0.28), rgba(124, 155, 255, 0.12)); border: 1px solid rgba(124, 155, 255, 0.22); }
.entonnoir b { font-size: 15.5px; white-space: nowrap; }
.entonnoir small { font-size: 12.5px; color: var(--doux); text-align: right; }
.entonnoir .verre-bleu small { color: rgba(255, 255, 255, 0.8); }
.suivi-points { display: grid; gap: 12px; }
.suivi-points .p-carte { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; padding: 18px 20px; }
.suivi-points .bulle { grid-row: 1 / 3; margin: 0; }
.suivi-points p { font-size: 14px; }

/* Points et airdrop : le chemin d'un pari. */
.chemin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pas { position: relative; border-radius: 24px; padding: 26px 22px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.pas:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; right: -19px; width: 24px; height: 24px; margin-top: -12px;
  background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c9bff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"), #0b0f22;
  border: 1px solid rgba(124, 155, 255, 0.35); border-radius: 50%; }
.pas img { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(18, 56, 255, 0.55)); }
.pas b { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 20px; }
.pas small { font-size: 14px; color: var(--doux); line-height: 1.4; }
.pas .bulle { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; }
.pas .bulle .ic { width: 36px; height: 36px; }
.pas.final b { color: var(--eclat); }

/* Originals à clipper : un téléphone + les trois règles. */
.viral { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.telephone { position: relative; border-radius: 40px; padding: 10px; aspect-ratio: 9 / 18.5; }
.telephone .ecran { position: relative; overflow: hidden; height: 100%; border-radius: 31px; }
.telephone .ecran img { width: 100%; height: 100%; object-fit: cover; }
.telephone .ecran::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.85)); }
.telephone .legende { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 22px; display: grid; gap: 6px; }
.telephone .legende b { font-size: 17px; line-height: 1.2; }
.telephone .legende small { font-size: 12.5px; color: rgba(255, 255, 255, 0.8); }
.telephone .multi { position: absolute; z-index: 1; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); font-family: var(--titre); font-size: 54px; color: #fff; text-shadow: 0 0 30px rgba(255, 62, 138, 0.9), 0 4px 0 rgba(0, 0, 0, 0.3); animation: battement 1.6s ease-in-out infinite; }
@keyframes battement { 50% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.12); } }
.regles { display: grid; gap: 14px; grid-template-rows: repeat(3, 1fr); }
.regle { border-radius: 22px; padding: 22px 24px; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; align-items: center; }
.regle .n { font-family: var(--titre); font-size: 40px; color: var(--eclat); line-height: 1; }
.regle b { display: block; font-size: 18px; margin-bottom: 4px; }
.regle p { margin: 0; font-size: 14.5px; color: var(--doux); line-height: 1.5; }

/* ---------- Notre travail (page d'ouverture) ---------- */

/* Le parcours en 5 arrêts, le nouveau site en dernier. */
.parcours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.arret { position: relative; overflow: hidden; border-radius: 22px; padding: 18px; display: grid; gap: 4px; align-content: start; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.arret:hover { transform: translateY(-4px); }
.arret img { width: 92px; height: 92px; object-fit: contain; margin: 0 auto 10px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5)); }
.arret img.ecran { width: 100%; height: 92px; object-fit: cover; object-position: top left; border-radius: 12px; filter: none; border: 1px solid rgba(255, 255, 255, 0.12); }
.arret span { font-family: var(--titre); font-size: 13px; color: var(--eclat); }
.arret.verre-bleu span { color: rgba(255, 255, 255, 0.8); }
.arret b { font-size: 17px; letter-spacing: -0.01em; }
.arret small { font-size: 13px; line-height: 1.4; color: var(--doux); }
.arret.verre-bleu small { color: rgba(255, 255, 255, 0.8); }
.arret.final { box-shadow: inset 0 0 0 1px rgba(124, 155, 255, 0.45); }
.ecran-floute { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 12px; margin-bottom: 10px; }
.ecran-floute img.ecran { margin: 0; filter: blur(7px) saturate(1.3); transform: scale(1.15); }
.ecran-floute .ic { position: absolute; width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }

/* ALEA : la société fondée ensuite par Ange et Raphaël. */
.alea { border-radius: 24px; padding: 22px 26px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.alea-logo { font-family: var(--titre); font-size: 30px; letter-spacing: 0.04em; color: var(--vert); }
.alea b { font-size: 17px; }
.alea p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--doux); }
.alea .ic { width: 16px; height: 16px; }


.equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.membre { border-radius: 28px; padding: 30px; display: grid; gap: 18px; align-content: start; }
.membre-tete { display: flex; gap: 18px; align-items: center; }
.membre-av { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(124, 155, 255, 0.45); }
.membre-tete b { display: block; font-size: 26px; letter-spacing: -0.02em; }
.membre-tete small { font-size: 14px; color: var(--eclat); font-weight: 600; }
.membre p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--doux); }
.membre p b { color: var(--texte); font-weight: 600; }
.membre .p-chiffres b { font-size: 26px; }
.membre .rangee { gap: 8px; }
.membre a.puce:hover, a.partenaire:hover { background: rgba(18, 56, 255, 0.35); }
.membre-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.membre-liens a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.membre-liens a:hover { color: var(--eclat); }
.membre-liens .ic { width: 16px; height: 16px; }

.bilan { --col: 2; }
.bilan .p-carte { gap: 6px; min-height: 150px; align-content: end; }
.bilan b.titre { font-size: clamp(36px, 4vw, 54px); }
.bilan small { font-size: 14px; color: var(--doux); line-height: 1.45; }
.bilan .p-carte.verre-bleu small { color: rgba(255, 255, 255, 0.8); }
.bilan a.p-carte { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bilan a.p-carte:hover { transform: translateY(-4px); }

.partenaires { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.partenaire { height: 64px; padding: 0 26px; border-radius: 18px; display: flex; align-items: center; gap: 10px; font-family: var(--titre); font-size: 20px; text-transform: uppercase; }
.partenaire small { font-family: var(--sans); font-size: 12px; text-transform: none; color: var(--doux); font-weight: 600; }

/* Étude de cas : le texte et les chiffres à gauche, le rapport du casino à droite. */
.cas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.cas .p-tete { gap: 22px; }
.cas-chiffres { --col: 2; gap: 10px; }
.cas-chiffres .p-carte { padding: 18px 20px; gap: 4px; border-radius: 18px; }
.cas-chiffres b { font-family: var(--titre); font-weight: 400; font-size: clamp(26px, 2.8vw, 34px); line-height: 1; }
.cas-chiffres small { font-size: 13px; color: var(--doux); }
.cas .p-liens .doux { font-size: 13.5px; }
.recu { margin: 0; border-radius: 24px; padding: 12px; display: grid; gap: 4px; transform: rotate(1.2deg); }
.recu img { width: 100%; border-radius: 14px; }
.recu a { position: relative; display: block; }
.surligne { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px solid var(--bleu); border-radius: 8px; box-shadow: 0 0 0 4px rgba(18, 56, 255, 0.18); }
.recu figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 8px 4px; font-size: 13.5px; font-weight: 600; color: var(--doux); }
.recu .ic { width: 16px; height: 16px; color: var(--eclat); }

/* Clips Unchained : cinq shorts avec leurs vues. */
.shorts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.short { display: grid; gap: 10px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.short:hover { transform: translateY(-4px); }
.short .vignette { position: relative; display: block; }
.short .vignette .puce { position: absolute; left: 8px; top: 8px; height: 24px; padding: 0 9px; font-size: 11px; }
.short img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; object-position: top; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); }
.short b { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.short .ic { width: 17px; height: 17px; color: var(--eclat); }
.ferme { border-radius: 24px; padding: 22px 26px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.ferme .bulle { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; }
.ferme .bulle .ic { width: 22px; height: 22px; }
.ferme b { font-size: 17px; }
.ferme p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.ferme .ferme-chiffre { font-size: clamp(34px, 4vw, 52px); font-weight: 400; }

/* Captures des tableaux de bord : on clique pour les ouvrir en grand. */
.recus { --col: 2; gap: 22px 14px; }
.recus a { display: grid; gap: 4px; }
.recus .cadre { display: block; overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 10px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.1); background: #0b0d14; transition: border-color 0.3s; }
.recus a:hover .cadre { border-color: rgba(124, 155, 255, 0.6); }
.recus img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.recus b { font-size: 15.5px; }
.recus small { font-size: 13.5px; color: var(--doux); }

.confiance { position: relative; overflow: hidden; border-radius: 34px; padding: 56px; display: grid; gap: 30px; }
.confiance h2 { margin: 0; font-size: clamp(32px, 4.4vw, 58px); max-width: 860px; }
.confiance > p { margin: 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.8); max-width: 560px; }

/* ---------- Deal ---------- */

.partage { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.anneau { position: relative; border-radius: 28px; display: grid; place-items: center; padding: 30px; }
.anneau svg { width: 100%; max-width: 280px; transform: rotate(-90deg); overflow: visible; }
.anneau circle { fill: none; stroke-width: 22; }
.anneau .piste-a { stroke: rgba(255, 255, 255, 0.12); }
.anneau .part { stroke: url(#degrade-part); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s cubic-bezier(0.22, 1, 0.36, 1); filter: drop-shadow(0 0 12px rgba(59, 98, 255, 0.8)); }
.anneau.vu .part { stroke-dasharray: 49 100; }
.js .anneau:not(.vu) .part { stroke-dasharray: 0 100; }
.anneau .centre { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; gap: 4px; }
.anneau .centre b { font-family: var(--titre); font-weight: 400; font-size: 64px; line-height: 1; }
.anneau .centre small { font-size: 13px; color: var(--doux); font-weight: 600; }
.paliers { border-radius: 28px; padding: 34px; display: grid; gap: 26px; align-content: start; }
.paliers h3 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); }
.paliers > p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--doux); max-width: 520px; }
.escalier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.marche { border-radius: 18px; padding: 16px 18px; display: grid; gap: 4px; align-content: end; }
.marche:nth-child(1) { min-height: 110px; }
.marche:nth-child(2) { min-height: 150px; }
.marche:nth-child(3) { min-height: 196px; }
.marche b { font-family: var(--titre); font-weight: 400; font-size: 34px; line-height: 1; }
.marche small { font-size: 13px; color: var(--doux); line-height: 1.4; }
.marche.verre-bleu small { color: rgba(255, 255, 255, 0.8); }

.missions { --col: 4; }
.mission { border-radius: 20px; padding: 20px; display: grid; gap: 12px; align-content: start; min-height: 130px; }
.mission .ic { width: 24px; height: 24px; color: var(--eclat); }
.mission b { font-size: 16px; line-height: 1.3; }
.note-pub { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--doux); }
.note-pub b { color: var(--texte); }
.note-pub .ic { color: var(--eclat); }

.conditions { --col: 3; }
.conditions .p-carte { padding: 28px; min-height: 200px; }
.conditions .n { font-family: var(--titre); font-size: 44px; line-height: 1; color: var(--eclat); }
.avance { border-radius: 24px; padding: 24px 28px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center; }
.avance .bulle { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; }
.avance .bulle .ic { width: 26px; height: 26px; }
.avance b { display: block; font-size: 17px; margin-bottom: 4px; }
.avance p { margin: 0; font-size: 15px; color: var(--doux); line-height: 1.5; }

.frise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.frise::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: linear-gradient(90deg, #1238ff, rgba(124, 155, 255, 0.6), rgba(124, 155, 255, 0.1)); }
.jalon { position: relative; display: grid; gap: 14px; align-content: start; }
.jalon .point { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.jalon .point .ic { width: 22px; height: 22px; }
.jalon .p-carte { padding: 20px; }
.jalon small { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eclat); }
.jalon ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; color: var(--doux); }

.appel { position: relative; overflow: hidden; border-radius: 34px; padding: 64px 48px; display: grid; justify-items: center; text-align: center; gap: 22px; }
.appel h2 { margin: 0; font-size: clamp(40px, 6vw, 84px); }
.appel p { margin: 0; font-size: 18px; color: rgba(255, 255, 255, 0.8); max-width: 520px; line-height: 1.5; }
.appel img { width: 170px; margin-bottom: -10px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5)); }

@media (max-width: 1100px) {
  .problemes, .manques, .missions { --col: 2; }
  .parcours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leviers { --col: 4; }
  .noms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etape::after { display: none; }
  .originaux .tuile, .signature { width: calc((100% - 3 * 12px) / 4); }
  .partage { grid-template-columns: minmax(0, 1fr); }
  .anneau svg { max-width: 240px; }
}

@media (max-width: 860px) {
  .pitch { gap: 96px; }
  .p-heros { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .p-heros-texte { padding: 40px 28px 0; }
  .p-heros-drop { width: 260px; margin: 0 0 -10px; }
  .duo, .vip, .fondateur-zone, .viral, .equipe, .fin, .cas { grid-template-columns: minmax(0, 1fr); }
  .posts, .conditions { --col: 1; }
  .shorts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 34%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .alea { grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; }
  .short { scroll-snap-align: start; }
  .renommage { grid-template-columns: auto auto 1fr; padding: 28px; }
  .renommage .ou { grid-column: 1 / -1; justify-self: start; justify-items: start; text-align: left; }
  .machine-haut { grid-template-columns: minmax(0, 1fr); padding: 0 24px; }
  .machine-haut img { width: 180px; justify-self: center; grid-row: 1; }
  .etapes, .citation { padding: 0 24px; }
  .armee { margin: 0 24px; }
  .suivi { grid-template-columns: minmax(0, 1fr); }
  .coup { grid-template-columns: 56px minmax(0, 1fr); }
  .coup .bouton-verre { grid-column: 1 / -1; justify-self: start; }
  .chemin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pas:nth-child(2)::after { display: none; }
  .telephone { width: 260px; justify-self: center; }
  .frise { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .frise::before { left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, #1238ff, rgba(124, 155, 255, 0.1)); }
  .jalon { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .confiance, .appel { padding: 40px 24px; }
  .p-entete .actions { display: none; }
}

@media (max-width: 640px) {
  .pitch { padding: 16px 16px 190px; gap: 84px; }
  .p-entete .p-pour { display: none; }
  .p-heros-texte { padding: 32px 22px 0; }
  .p-heros p { font-size: 16.5px; }
  .p-chiffres b { font-size: 25px; }
  .problemes, .manques, .missions, .bilan, .recus, .vip-avantages { --col: 1; }
  .parcours { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .arret { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; align-items: center; padding: 14px 16px; }
  .arret > img, .arret .ecran-floute { grid-row: 1 / 4; width: 64px; height: 64px; margin: 0; }
  .arret .ecran-floute img.ecran { width: 64px; height: 64px; }
  .ferme { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
  .ferme .ferme-chiffre { grid-column: 1 / -1; }
  .shorts { grid-auto-columns: 58%; }
  .recu { transform: none; }
  .leviers { --col: 2; }
  .levier:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .armee { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .entonnoir { padding: 18px 14px; }
  .entonnoir div { min-width: 0; padding: 12px 14px; justify-content: center; }
  .entonnoir small { display: none; }
  .noms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noms .nom-marque:last-child { grid-column: 1 / -1; }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .chemin { grid-template-columns: minmax(0, 1fr); }
  .pas::after { display: none; }
  .originaux .tuile, .signature { width: calc((100% - 12px) / 2); min-width: 0; }
  .barre { grid-template-columns: minmax(0, 1fr) 86px; gap: 8px 12px; }
  .barre span { grid-column: 1 / -1; }
  .jauges, .paliers, .duo .p-carte { padding: 22px; }
  .p-liste { max-width: none; }
  .duo .deco { width: 150px; right: -34px; bottom: -44px; opacity: 0.35; }
  .exemple { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .escalier { gap: 8px; }
  .marche { padding: 12px; }
  .marche b { font-size: 26px; }
  .renommage { grid-template-columns: auto 1fr; gap: 14px 18px; }
  .renommage s { grid-column: 1 / -1; font-size: 34px; }
  .renommage .ic { width: 28px; height: 28px; }
  .regle { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px; }
  .regle .n { font-size: 32px; }
  .membre, .confiance { padding: 24px; }
  .vip-folie { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .patience { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .p-heros-drop, .machine-haut img, .telephone .multi { animation: none; }
  .js .revele { opacity: 1; transform: none; transition: none; }
}